Child.prototype = new Parent() //将子类的原型指向父类的实例
复制代码
//定义父类,并在父类中定义属性与方法
function Parent() {
this.name = 'zs'
this.age = 18
this.arr = [1, 2]
this.sing = function () {
console.log(this.name);
}
}
//通过原型方式给父类添加属性与方法
Parent.prototype.sex = 'male'
Parent.prototype.song = function () {
console.log(this.sex);
}
//定义子类,在子类中定义相同的属性和方法,在原型链继承后可以覆盖父类的属性与方法。
function Child(name) {
this.name = name
}
//进行原型链继承
Child.prototype = new Parent()
Child.prototype.num = 15
//将子类实例化
let zdh = new Child('zdh')
Child.prototype.nums = 15
zdh.sing() //'zdh'
console.log(zdh.name); //'zdh'
zdh.song() //male
console.log(zdh.arr);//[1, 2]
zdh.arr.push(5)
console.log(zdh.arr);//[1, 2 , 5]
console.log(zdh.num);//undefined
console.log(zdh.nums);//15
let zxy = new Child('zxy')
console.log(zxy.name);//zxy
console.log(zxy.arr);//[1, 2 , 5]
复制代码
Child.prototype = new Parent()
这样的语句后面在子类构造函数内部使用`call或apply`来调用父类构造函数
复制代码
function Parent() {
this.name = 'zs'
this.age = 18
this.arr = [1, 2]
this.sing = function () {
console.log(this.name);
}
}
Parent.prototype.sex = 'male'
Parent.prototype.song = function () {
console.log(this.sex);
}
function Child(name) {
this.name = name
Parent.call(this, ...arguments)//如果有同名的属性与方法会进行覆盖
}
//等同于
// function Child(name) {
// this.name = name
// this.name = 'zs'
// this.age = 18
// this.arr = [1, 2]
// this.sing = function () {
// console.log(this.name);
// }
// }
let zdh = new Child('zdh')
zdh.sing() //zs
console.log(zdh.name);//zs
zdh.song() //报错
console.log(zdh.arr);//[1, 2]
zdh.arr.push(5)
console.log(zdh.arr);//[1, 2 , 5]
let zxy = new Child('zxy')
console.log(zxy.name);//zs
console.log(zxy.arr);//[1, 2]
复制代码
(无法实现函数复用’父类构造函数中的某个函数可能只是一个功能型的函数,它不论被复制了多少份,输出的结果或者功能都是一样的,那么这类函数是完全可以拿来复用的。但是现在用了构造函数继承,由于它是复制了父类构造函数中的属性和方法,这样产生的每个子类实例中都会有一份自己各自的方法,可是有的方法完全没有必要复制,可以用来共用的,所以就说不能够「函数复用」。)
function Parent() {
...
}
function Child() {
Parent.call(this, ...arguments)//构造函数继承
}
Child.prototype = new Parent() //原型链继承
复制代码
function Parent() {
this.name = 'zs'
this.age = 18
this.arr = [1, 2]
this.sing = function () {
console.log(this.name);
}
}
Parent.prototype.sex = 'male'
Parent.prototype.song = function () {
console.log(this.sex);
}
function Child(name) {
this.name = name
Parent.call(this, ...arguments)//如果有同名的属性与方法会进行覆盖
}
Child.prototype = new Parent()
let zdh = new Child('zdh')
zdh.sing() //zs
console.log(zdh.name);//zs
zdh.song() //male
console.log(zdh.arr);//[1, 2]
zdh.arr.push(5)
console.log(zdh.arr);//[1, 2 , 5]
let zxy = new Child('zxy')
console.log(zxy.name);//zs
console.log(zxy.arr);//[1, 2]
复制代码
function Parent() {
...
}
function Child() {
Parent.call(this, ...arguments)//构造函数继承
}
Child.prototype = Object.create(Parent.prototype)
复制代码
function Parent() {
this.name = 'zs'
this.age = 18
this.arr = [1, 2]
this.sing = function () {
console.log(this.name);
}
}
Parent.prototype.sex = 'male'
Parent.prototype.song = function () {
console.log(this.sex);
}
function Child(name) {
this.name = name
Parent.call(this, ...arguments)//如果有同名的属性与方法会进行覆盖
}
//Child.prototype = new Parent()
Child.prototype = Object.create(Parent.prototype)
let zdh = new Child('zdh')
zdh.sing() //zs
console.log(zdh.name);//zs
zdh.song() //male
console.log(zdh.arr);//[1, 2]
zdh.arr.push(5)
console.log(zdh.arr);//[1, 2 , 5]
let zxy = new Child('zxy')
console.log(zxy.name);//zs
console.log(zxy.arr);//[1, 2]
复制代码
寄生组合继承算是ES6
之前一种比较完美的继承方式吧。
它避免了组合继承中调用两次父类构造函数,初始化两次实例属性的缺点。
所以它拥有了上述所有继承方式的优点:
instanceOf
和isPrototypeOf
方法//原型式继承的原理是创建一个构造函数,构造函数的原型指向对象,然后调用 new 操作符创建实例,并返回这个实例,本质是一个浅拷贝。
function objcet (obj) {
function F () {};
F.prototype = obj;
F.prototype.constructor = F;
return new F();
}
复制代码
function objcet (obj) {
function F () {};
F.prototype = obj;
F.prototype.constructor = F;
return new F();
}
var cat = {
heart: '❤️',
colors: ['white', 'black']
}
var guaiguai = create(cat)
var huaihuai = create(cat)
console.log(guaiguai)
console.log(huaihuai)
console.log(guaiguai.heart)
console.log(huaihuai.colors)
复制代码
//寄生式继承也没啥东西的,它就是在原型式继承的基础上再封装一层,来增强对象,之后将这个对象返回。
function createAnother (original) {
var clone = Object.create(original);; // 通过调用 Object.create() 函数创建一个新对象
clone.fn = function () {}; // 以某种方式来增强对象
return clone; // 返回这个对象
}
复制代码
var cat = {
heart: '❤️',
colors: ['white', 'black']
}
function createAnother (original) {
var clone = Object.create(original);
clone.actingCute = function () {
console.log('我是一只会卖萌的猫咪')
}
return clone;
}
var guaiguai = createAnother(cat)
var huaihuai = Object.create(cat)
guaiguai.actingCute()
console.log(guaiguai.heart)
console.log(huaihuai.colors)
console.log(guaiguai)
console.log(huaihuai)
复制代码
//这个**混入方式继承**其实很好玩,之前我们一直都是以一个子类继承一个父类,而**混入方式继承**就是教我们如何一个子类继承多个父类的。
//在这边,我们需要用到`ES6`中的方法`Object.assign()`。
//它的作用就是可以把多个对象的属性和方法拷贝到目标对象中,若是存在同名属性的话,后面的会覆盖前面。(当然,这种拷贝是一种浅拷贝啦)
function Child () {
Parent.call(this)
OtherParent.call(this)
}
Child.prototype = Object.create(Parent.prototype)
Object.assign(Child.prototype, OtherParent.prototype)
Child.prototype.constructor = Child
复制代码
function Parent(sex) {
this.sex = sex
}
Parent.prototype.getSex = function () {
console.log(this.sex)
}
function OtherParent(colors) {
this.colors = colors
}
OtherParent.prototype.getColors = function () {
console.log(this.colors)
}
function Child(sex, colors) {
Parent.call(this, sex)
OtherParent.call(this, colors) // 新增的父类
this.name = 'child'
}
Child.prototype = Object.create(Parent.prototype)
Object.assign(Child.prototype, OtherParent.prototype) // 新增的父类原型对象
Child.prototype.constructor = Child
var child1 = new Child('boy', ['white'])
child1.getSex() //boy
child1.getColors() //[ 'white' ]
console.log(child1)//Child { sex: 'boy', colors: [ 'white' ], name: 'child' }
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。