1.前言
雖然現(xiàn)在已經(jīng)是21年7月,但是
es6還是沒有那么的普及,所有簡單梳理下 一些常用的知識點
2. new
基礎(chǔ)構(gòu)造函數(shù)結(jié)構(gòu)
function Person(name, age) {
// this是誰
console.log(this);
this.name = name;
this.age = age;
// return this;
}
構(gòu)造函數(shù)調(diào)用 應(yīng)該叫創(chuàng)建實例了
Person(); //window
window.Person() Person()當普通函數(shù)調(diào)用 里面的this就是window
new 關(guān)鍵字的作用
1.創(chuàng)建了一個對象
- 修改
this指向把構(gòu)造函數(shù)this的指向修改為指向當前創(chuàng)建的對象
3.把這個新對象 return出去
- 執(zhí)行構(gòu)造函數(shù)的代碼
3. 構(gòu)造函數(shù) 原型
還是上文的 構(gòu)造函數(shù)
3.1 原型
每當定義一個對象（函數(shù)也是對象）時候，對象中都會包含一些預定義的屬性。其中每個函數(shù)對象都有一個
prototype屬性瞧柔，這個屬性指向函數(shù)的原型對象备绽，使用原型對象的好處是所有對象實例共享它所包含的屬性和方法
3.2 原型鏈
- 原型鏈的出現(xiàn) 主要是解決繼承問題
2.每個對象擁有一個原型對象猴伶，通過
proto指針指向其原型對象捡需，并從中繼承方法和屬性饰剥，同時原型對象也可能擁有原型顾孽，這樣一層一層盹沈，最終指向null(Object.proptotype.__proto__指向的是null)肃晚。這種關(guān)系被稱為原型鏈(prototype chain)拧廊，通過原型鏈一個對象可以擁有定義在其他對象中的屬性和方法
- 構(gòu)造函數(shù)
Parent落剪、Parent.prototype和 實例p的關(guān)系如下:(p.__proto__ === Parent.prototype)
var person1 = new Person("杜甫", 18);
console.log("person1",person1) //{name:"杜甫,age:18}
// 原型是被所有實例共享的 測試在添加個屬性 person1 也能打印出來
console.log(person1, person1.__proto__, Person.prototype);
// 對象比較 比的是地址 同一個對象
console.log(person1.__proto__ === Person.prototype);
person1.__proto__:通過實例對象 查看原型
Person.prototype:通過構(gòu)造函數(shù)名 查看原型
3.3 prototype 和 proto 區(qū)別是什么暮胧？
1.
prototype是構(gòu)造函數(shù)的屬性
2.__proto__是每個實例都有的屬性问麸，可以訪問prototype屬性
3.實例的__proto__與其構(gòu)造函數(shù)的prototype指向的是同一個對象
4. 原型
JavaScript的原型是為了實現(xiàn)對象間的聯(lián)系，解決構(gòu)造函數(shù)無法數(shù)據(jù)共享而引入的一個屬性，而原型鏈是一個實現(xiàn)對象間聯(lián)系即繼承的主要方法
Person.prototype.sex = "男";
// 原型上的屬性 sex和實例上的 屬性 name有什么區(qū)別
// 和實例上的屬性 name 有什么區(qū)別
console.log(person1.name, person1.sex);
var person2 = new Person("李白", 28);
console.log(person2.name, person2.sex);
.屬性先看自己有沒有 沒有往上層原型上找 都沒有未定義
5. 頂層原型
// 最頂層原型Object
// 給最頂層原型鏈添加
Object.prototype.hobby = "寫代碼";
console.log(person1.hobby);
//只要在js里面都有這個屬性
console.log(document.hobby);
console.log(document.body.hobby);
var a = [],
b = 10,
c = "abc";
console.log(a.hobby, b.hobby, c.hobby);
6. vue里面 舊版的用法
vue.prototype.baseUrl = "http://" // this.baseUrl
vue.prototype.$http = axios //this.$http.get().then().catch()
7. 類
查看數(shù)組的原型
實例上 放屬性
原型上 放函數(shù)
點類
class Point {
// 構(gòu)造函數(shù):類的一部分
// 通過類實例化一個對象被執(zhí)行的函數(shù)就是構(gòu)造函數(shù)
constructor(x, y) {
console.log("我被創(chuàng)建了...", x, y);
this.x = x;
this.y = y;
}
// 自定義函數(shù) 自動保存到原型上 對象上沒有 原型上有了
// 相當于 Peron.prototype.sayHi = function
sayHi() {
// this:誰調(diào)用,就是誰
console.log(`我的位置:x=${this.x}`);
}
}
點類的實例
var point1 = new Point(10, 20);
console.log(point1);
// 但是沒有輸出 加上參數(shù)
point1.sayHi();
var point2 = new Point(100, 200);
point2.sayHi();
8.繼承
class ColorPoint extends Point {
// 子類的構(gòu)造函數(shù)會覆蓋父類的構(gòu)造函數(shù),必須手動調(diào)用父類構(gòu)造函數(shù)
// 不走父類的構(gòu)造函數(shù) 沒創(chuàng)建父類 ,就沒有了父類的屬性和方法
constructor(x, y, color) {
super(x, y); // 調(diào)用父類構(gòu)造函數(shù) super父類的意思
// 自己只保存自己新增的屬性
this.color = color;
// this.x = x;
// this.y = y;//可以,但是沒必要,我們繼承 調(diào)父類就是為了省事
console.log("colorPoint 構(gòu)造函數(shù)");
}
}
彩色點的 實例
// 先走自己的構(gòu)造函數(shù) 在走父類
var color1 = new ColorPoint(11, 22, "red");
console.log(color1);
color1.sayHi();
