JS的继承

一,主要是靠原型链继承,

像类extend到类,实例对象和类,实例对象和构造函数之间会自动生成原型链; 还可以手动给两个对象(or构造函数)之间添加原型链,但有坑要注意
坑1:obj.prototype也是指针,如果son.prototype=obj.prototype直接把父亲的也改了,所以不能直接赋值原型对象,得通过new实例对象来建桥: 让son.prototype = new Father();
利用这个Father实例对象的__proto__指向Father.prototype, son实例也能够继承fa的属性了.
好处是: 尽情修改son.prototype,增加儿子独有的属性,而不会影响父亲;
坑2: son.prototype指向了Father实例对象, 那么,son.prototype.constructor变成了Father实例对象里的constructor,也指向了Father构造函数,这样是不行的, 我们想son.prototype.constructor指向son构造函数自己; 做法: Son.prototype.constructor=Son;即可,总结如下:
在这里插入图片描述
在这里插入图片描述

二,借用构造函数的方法

通过修改this值继承,常用call(this,传参)
在这里插入图片描述

细说区别:

1.构造函数跟new的实例对象

new实例对象的时候,通过原型链完全复制了构造函数的所有属性和方法; 所以修改一个实例的方法不会改变另一个实例对象的内容

function Pig(name, age) {
    this.name = name;
    this.age = age;
    this.sing = function() {
        console.log('你也会吹口哨吗? wuu~o~');
    };
};
var peiqi = new Pig('佩奇', 4);
var jorge = new Pig('乔治', 3);
peiqi.sing = function() {
    console.log('佩奇不会吹口哨');
}
console.log(peiqi.sing);
console.log(jorge.sing);

输出如下:
在这里插入图片描述

2. 构造函数的prototype里装共有属性/方法

改进了上面直接new实例时全复制带来的问题, prototype对象是不会被复制的,里面的内容可以通过原型链查找到; 但同样, 一旦被修改, 所有的实例对象调用构造函数的prototype里的方法时,都会被修改

不过修改prototype的时候要注意,最好不要整个重写,比如下面这样:

function Pig(name, age) {
    this.name = name;
    this.age = age;
}
//Pig.prototype整个被完全重写,里面的consstructor都无了
Pig.prototype = {
    sing: function() {
        console.log('你也会吹口哨吗? wuu~o~');
    }
}
var peiqi = new Pig('佩奇', 4);
var jorge = new Pig('乔治', 3);

console.log(peiqi);

打印佩奇可以看到, 佩奇__proto__属性指向的构造函数的prototype变成一个只有sing方法的对象了:
在这里插入图片描述
但是用下面的方法的的话,只是添加sing方法,而不会改变原来的constructor:

function Pig(name, age) {
    this.name = name;
    this.age = age;
}
//Pig.prototype整个被完全重写,里面的consstructor都无了
Pig.prototype.sing = function() {
    console.log('你也会吹口哨吗? wuu~o~');
}

var peiqi = new Pig('佩奇', 4);
var jorge = new Pig('乔治', 3);

console.log(peiqi);

打印结果如下: 很明显,多了个constructor
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值