- 原型鏈下端的屬性會屏蔽原型鏈上端的屬性(最下端為實例對象)
- 構造函數(shù)創(chuàng)建的原型對象矩距,因為Foo.prototype.constructor === Foo(原型對象的構造器是構造函數(shù)Foo)
- 構造函數(shù)首字母大寫是JavaScript世界的慣例!標識它是一個“類”
- new調(diào)用普通函數(shù)就是變成了構造函數(shù)調(diào)用
- 實例對象不是由構造函數(shù)構造的锣咒,實例的constructor有時候不等于構造函數(shù)毅整,比如重寫原型對象绽左,所以constroctor不表示由誰構造,避免使用實例對象的constructor屬性戏蔑。
- 原型的機制就是指對象中的一個內(nèi)部鏈接引用另一個對象总棵,其本質(zhì)就是對象之間的關聯(lián)關系情龄。
創(chuàng)建關聯(lián)
es6之前需要拋棄原型對象,例如
Bar.prototype = Object.create(Foo.prototype)
es6語法不用拋棄鞍爱,例如Object.setPrototypeOf(Bar.prototype,Foo.prototype)
instance = Object.create(obj)
- 找實例的祖先
- a instanceof Foo a的原型鏈上是否有Foo函數(shù)的原型(對象和函數(shù)的關系)
- Foo.prototype.isPrototypeOf(a) a的原型鏈上是否出現(xiàn)過Foo的原型(對象和對象的關系)
- 獲取原型 Object.getPrototypeOf(a) === Foo.prototype
原型prototype繼承(原型鏈繼承)
function Animal(name,arr) {
this.name = name;
this.arr = arr;
this.sleep = function () {
console.log(this.name + '正在睡覺')
}
}
Animal.prototype.eat = function (food) {
console.log(this.name + '正在吃'+food)
}
function Cat() {
}
// 關鍵代碼
Cat.prototype = new Animal()
// 關鍵代碼
Cat.prototype.constructor = Cat
Cat.prototype.age= 2
var cat1 = new Cat()
var cat2 = new Cat()
cat1.arr.push(1)
// 優(yōu)缺點
// 子類新增原型屬性和方法睹逃,必須在new Animal()之后執(zhí)行,無法實現(xiàn)多繼承
// 創(chuàng)建子類實例時無法向超類傳遞參數(shù)躬柬,new Cat
// 構造函數(shù)中引用類型的屬性arr,一個實例修改該屬性橄碾,其他實例都會使用修改后的值(引用類型值的共享問題)
- 直接繼承proptotype
// 關鍵代碼
Cat.prototype = Animal.prototype
// 關鍵代碼
Cat.prototype.constructor = Cat
// 會把Animal的原型對象的constructor改了!
- 構造函數(shù)繼承
function Cat(name, age) {
// 關鍵代碼
Animal.call(this, name)
// 關鍵代碼
this.age = age
}
var car1 = new Cat('小黑', 2)
// 優(yōu)缺點
// 可以在子類構造函數(shù)中向超類函數(shù)傳遞參數(shù)
// 子類可以實現(xiàn)多繼承琼掠,不能繼承原型鏈拒垃,方法函數(shù)都在構造函數(shù)中定義,無法復用
- 原型鏈組合構造函數(shù)繼承
function Cat(name, age) {
// 關鍵代碼
Animal.call(this, name)
this.age = age
}
// 關鍵代碼
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat
var car1 = new Cat('小黑', 2)
// 調(diào)用了兩次超類構造函數(shù)
// 可以使用create
Cat.prototype = Object.create(Animal.prototype);
- 原型式繼承瓷蛙,使用空對象作為中介
借助原型可以基于已有的對象創(chuàng)建新對象
es5規(guī)范了該方法悼瓮,即Object.create()
// o為超類原型
function obj(o) {
function F() {}
F.prototype = o
let f = new F()
return f
}
或者
function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
- 實例繼承
function Cat(name, age) {
var instance = new Animal()
instance.age = age
return instance
}
var car1 = new Cat('小黑', 2)
var cat2 = Cat('小黑', 2)
// 優(yōu)缺點
// 不限制調(diào)用方式,不能實現(xiàn)多繼承
- 拷貝繼承
function extend2(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
}
- 寄生式繼承
// o為原型對象
function createObj(o) {
let clone = Object.create(o)
clone.sayHi = function () {
console.log('hi');
}
return clone
}
o1 = createObj(o)
// 添加的方法不能被復用
- 寄生組合構造函數(shù)繼承
// 通過create創(chuàng)建sub的prototype對象
function Super(name) {
this.name = name
this.color = ['red', 'blue']
}
Super.prototype.sayHi = function () {
console.log('hi');
}
function Sub(name, age) {
Super.call(name)
this.age = age
}
Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = sub
Sub.prototype.eat = function () {
console.log('eat');
}
let o1 = new Sub('jack', 18)
// 只調(diào)用一次超類構造函數(shù)艰猬,