一. 封裝
1. 構(gòu)造函數(shù)模式
// 首先創(chuàng)建一個構(gòu)造函數(shù)
function Cat (name, color) {
this.name = name;
this.color = color;
}
// 實例化
const cat1 = new Cat('名字', '顏色')
console.log(cat1.name, '???name') // 名字
console.log(cat1.color, '???color') // 顏色
// 可以用instanceof的方法來判斷實例化的方法是否屬于構(gòu)造杉樹(注意沒有點(diǎn))
console.log(cat1 instanceof Cat, '???') // true
但是構(gòu)造函數(shù)會存在一個浪費(fèi)內(nèi)存的問題
// 給這個構(gòu)造函數(shù)添加一個eat方法
function Cat (name, color) {
this.name = name;
this.color = color;
this.eat = function () {
console.log('我的名字')
}
}
// 每次實例化之后相當(dāng)于創(chuàng)建了一個新對象 對象里面的屬性都是重復(fù)的內(nèi)容，會多占用內(nèi)存（相當(dāng)于每次實例化出來的對象里面的屬性會再一次被實例化出來）
var cat1 = new Cat("一","黃色");
var cat2 = new Cat ("二","黃色");
console.log(cat1.color); // 黃色
console.log(cat2.color); // 黃色
cat1.eat(); // 我的名字
cat2.eat(); // 我的名字
console.log(cat2.color == cat1.color) // true
console.log(cat1.eat == cat2.eat) // false
2. prototype模式
js規(guī)定，每一個構(gòu)造函數(shù)上都有一個prototype屬性客们，指向另一個對象诚撵。這個對象的所有屬性和方法，都會被構(gòu)造函數(shù)的實例繼承陈莽，所以可以把那些公共的方法或者屬性直接定義在prototype上面渤昌。
function Cat(name,color){
this.name = name;
this.color = color;
}
Cat.prototype.type = "類型";
Cat.prototype.eat = function(){console.log("我的名字")};
var cat1 = new Cat("一","黃色");
var cat2 = new Cat ("二","黃色");
console.log(cat1.type); // 黃色
console.log(cat2.type); // 黃色
console.log(cat1.eat === cat2.eat); // true
// 它們都指向的同一個內(nèi)存地址
// js提供了一些方法 方便配合prototype
// 1. isPrototypeOf() 判斷構(gòu)造函數(shù)里面有沒有這個實例 （注意：要用構(gòu)造函數(shù)的prototype去調(diào)用這個方法）
console.log(Cat.prototype.isPrototypeOf(cat1)); //true
console.log(Cat.prototype.isPrototypeOf(cat2)); //true
// 2. hasOwnProperty() 判斷自身有沒有這個屬性 有的話返回true 否則返回false （注意：掛載到prototype上面的屬性不屬于自身屬性，所以會返回false）
console.log(cat1.hasOwnProperty("color")); // true
console.log(cat1.hasOwnProperty("type")); // false
// in運(yùn)算符 判斷實例化的對象有沒有這個屬性 無論他是自身的還是prototype的
console.log("color" in cat1); // true
console.log("type" in cat1); // true
二. 繼承
function Animal(){
this.species = "動物";
}
1.構(gòu)造函數(shù)綁定/對象冒充 (通過apply或者call改變Animal的指向)
function Cat(name,color){
Animal.apply(this, arguments);
this.name = name;
this.color = color;
}
var cat1 = new Cat("大毛","黃色");
console.log(cat1.species); // 動物
2.prototype繼承（*比較難理解）
/**
1. 首先需要知道的是構(gòu)造函數(shù)的prototype.construct默認(rèn)指向它本身這個構(gòu)造函數(shù)（例如：Cat.prototype.constructor === Cat）
2. 其次實例化出來的對象的constructor默認(rèn)指向構(gòu)造函數(shù)的prototype.constructor（例如: cat1.constructor === Cat.prototype.constructor）
3. 所以實例化出來的對象的constructor默認(rèn)指向它的構(gòu)造函數(shù) （例如：cat1.constructor === Cat）
*/
console.log(Cat.prototype.constructor) // Cat()
// 正常情況下Cat.prototype.constructor默認(rèn)應(yīng)該指向Cat的這個構(gòu)造函數(shù)是沒問題的
Cat.prototype = new Animal();
// 但是走搁，在這里Cat.prototype把Cat這個構(gòu)造函數(shù)的prototype對象修改成了Animal這個構(gòu)造函數(shù)的實例化独柑。
console.log(Cat.prototype.constructor) // Animal（）
console.log(cat1.constructor) // Animal（）
// 所以現(xiàn)在的Cat.prototype.constructor和他的實例化的指向為Animal這個構(gòu)造函數(shù)
// 但是這段代碼是什么意思呢
Cat.prototype.constructor = Cat;
// 因為在上述的案例中 通過修改Cat.prototype 使Cat.prototype.constructor指向了Animal這個構(gòu)造函數(shù)，
// 但是cat1這個實例化出來的對象明明是指向Cat這個構(gòu)造函數(shù)的私植。
// 所以我們要把Cat.prototype.constructor手動讓其重新指向Cat這個構(gòu)造函數(shù)
/**
所以切記＜烧ぁ！兵琳！ 即如果替換了prototype對象狂秘，
那么骇径，下一步必然是為新的prototype對象加上constructor屬性，并將這個屬性指回原來的構(gòu)造函數(shù)者春。
**/
console.log(Cat.prototype.constructor ) // Cat
// 最后既可以繼承到Animal的這個屬性并實例化的指向也沒有變
var cat1 = new Cat("大毛","黃色");
console.log(cat1.species); // 動物
console.log(cat1.constructor === Cat.prototype.constructor) // true
3.直接繼承prototype
// 聲明一個構(gòu)造函數(shù) 在prototype添加一個動物的屬性
function Animal(){ }
Animal.prototype.species = "動物";
// Cat 不變
function Cat(name,color){
this.name = name;
this.color = color;
}
// 因為空函數(shù)幾乎不占內(nèi)存
var F = function(){};
F.prototype = Animal.prototype; // 同理改變F.prototype 的指向 F.prototype.constructor === Animal
Cat.prototype = new F();
// 同理改變Cat.prototype 的指向 Cat.prototype.constructor === F
// 因為上面 F.prototype.constructor === Animal
// 所以 Cat.prototype.constructor === Animal
Cat.prototype.constructor = Cat; // 改變了Cat.prototype.constructor的指向之后要記得把它改回來
console.log(Animal.prototype.constructor); // Animal
