网站页面设计如何快速定稿,万能模板,洛谷网站中小玉文具怎么做,外包活一般是怎么接的“生活是一幅绚丽的画#xff0c;每一刻都是色彩的斑斓。在画布上#xff0c;用坚韧的笔触勾勒出自己的世界#xff0c;让每一幅画作都是奋斗的痕迹#xff0c;成就属于自己的艺术之旅。” - 梵高 继承的多种方式
原型链继承
function Parent () {this.name minifan
}Pa… “生活是一幅绚丽的画每一刻都是色彩的斑斓。在画布上用坚韧的笔触勾勒出自己的世界让每一幅画作都是奋斗的痕迹成就属于自己的艺术之旅。” - 梵高 继承的多种方式
原型链继承
function Parent () {this.name minifan
}Parent.prototype.getName function () {console.log(this.name)
}function Child () {
}Child.prototype new Parent()
var child1 new Child()
console.log(child1.getName()) // minifan问题
1.引用类型的属性被所有实例共享举个例子
function Parent () {this.names [minifan,qinqin];
}function Child () {
}Child.prototype new Parent();
var child1 new Child()
child1.names.push(tuantuan)console.log(child1.names) // [minifan,qinqin,tuantuan]
var child2 new Child()
console.log(child2.names) // [minifan,qinqin,tuantuan]2.在创建 Child 的实例时不能向Parent传参
2.借用构造函数(经典继承)
function Parent () {this.names [minifan,qinqin]
}function Child () {Parent.call(this)
}var child1 new Child()
child1.names.push(tuantuan)
console.log(child1) // [minifan,qinqin,tuantuan]var child2 new Child();
console.log(child2.names) // [minifan,qinqin]优点
1.避免了引用类型的属性被所有实例共享
2.可以在 Child 中向 Parent 传参
举个例子
function Parent (name) {this.name name
}function Child (name) {Parent.call(this,name)
}var child1 new Child(minifan)
console.log(child1.name) // minifanvar child2 new Child(qinqin)
console.log(child2.name) // qinqin缺点
方法都在构造函数中定义每次创建实例都会创建一遍方法。
组合继承
原型链继承和经典继承双剑合璧。
function Parent (name) {this.name namethis.colors [red,blue,green]
}Parent.prototype.getName function () {console.log(this.name)
}function Child (name,age) {Parent.call(this,name)this.age age
}Child.prototype new Parent()
Child.prototype.constructor Childvar child1 new Child(minifan, 30)child1.colors.push(black)console.log(child1.name) // minifan
console.log(child1.age) // 30
console.log(child1.colors) // [red,blue,green,black]var child2 new Child(qinqin,18)console.log(child2.name) // qinqin
console.log(child2.age) // 18
console.log(child2.colors) // [red,blue,green]优点融合原型链继承和构造函数的优点是 JavaScript 中最常用的继承模式。
4. 原型式继承
function createObj (o) {function F() {}F.prototype o;return new F();
}就是 ES5 Object.create 的模拟实现将传入的对象作为创建的对象的原型。
缺点 包含引用类型的属性值始终都会共享相应的值这点跟原型链继承一样。
var person {name: minifan,friends: [caidao,zhushu]
}var person1 createObj(person)
var person2 createObj(person)person1.name person1
console.log(person2.name) // minifanperson1.friends.push(tandou)
console.log(person2.friends) // [caidao,zhushu,tandou]注意修改person1.name的值person2.name的值并未发生改变并不是因为person1和person2有独立的 name 值而是因为person1.name ‘person1’给person1添加了 name 值并非修改了原型上的 name 值。
5. 寄生式继承
创建一个仅用于封装继承过程的函数该函数在内部以某种形式来做增强对象最后返回对象。
function createObj (o) {var clone Object.create(o)clone.sayName function () {console.log(hi)}return clone;
}缺点 跟借用构造函数一样每次创建对象都会创建一遍方法。
6. 寄生组合式继承
为了方便大家阅读在这里重复一下组合继承的代码
function Parent (name) {this.name namethis.colors [red,blue,green]
}Parent.prototype.getName function () {console.log(this.name)
}function Child (name,age) {Parent.call(this,name)this.age age
}// 关键的三步
var F function() {}F.prototype Parent.prototype
Child.prototype new F();var child1 new Child(minifan,30)
console.log(child1) 最后我们封装一下这个继承方法
function object(o) {function F() {}F.prototype o;return new F();
}function prototype(child,parent) {var prototype object(parent.prototype)prototype.constructor childchild.prototype prototype
}// 当我们使用的时候
prototype(Child,Parent)引用《JavaScript高级程序设计》中对寄生组合式继承的夸赞就是
这种方式的高效率体现它只调用了一次 Parent 构造函数并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。与此同时原型链还能保持不变因此还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
