JS中的继承原型链

这篇文章主要是讲解本人对于继承的理解

第一种继承(属性继承)

function Fn() {
    this.a = 4;
    this.b = 5;
    this.log = function () {
        console.log(this.a, this.b);
    };
}
Fn.prototype.qqq = 78;
function Fn1() {
    Fn.call(this)//这句代码就直接让Fn1这个类,继承了Fn的所有属性和方法,并且不会互相影响
    /*
    * 这种继承是重新拷贝一份放入内存中,他们的值相互独立,并且修改一个,不会
    * 改变另外一个...
    * */
};
Fn1.prototype = Fn.prototype;//即便上是使用赋值符号,当时后来原型对象下的属性改变时,他们也是不互相影响的
var fn = new Fn();
var fn1 = new Fn1();
// console.log( fn1 instanceof Fn);//true
// console.log( fn instanceof Fn1);//true
fn.a = 5;
fn1.qqq = 20;
console.log('qqq',fn.qqq);//78
console.log(fn.a);//5
console.log(fn1.a);//4

通过以上的代码，实现了构造函数Ｆｎ１继承了Ｆｎ的所有属性和方法

总结：这种继承，是重新拷贝一份放入到内存中，他们的值相互独立，修改一个不会改变另外一个

第二种继承(原型继承prototype)

    function Fn() {}
    Fn.prototype.data = {
        name: 'Jack'
    }
    Fn.prototype.getName = function () {
        return this.data.name;
    }
    function Fn1() {}
    Fn1.prototype = Fn.prototype//原型链继承,,,Fn1继承了Fn,,,
    var fn = new Fn()
    var fn1 = new Fn1()
    console.log(fn1 instanceof Fn);//true
    console.log(fn.getName());//Jack
    console.log(fn1.getName());//Jack
    //修改了fn的name属性
    fn.data.name = 'Alice';
    console.log(fn.getName());//Alice
    console.log(fn1.getName());//Alice
    /*
    * 修改之后,发现fn1对应的属性也跟着变了,由此可以看出,原型链继承是引用继承
    * 不会重新拷贝出一份变量.就像是对象的引用一样
    * */

总结:类中直接this.出来的属性和方法都会直接复制一份给子类或者实例对象．各个子类或实例对象之间互不影响．

使用ｐｒｏｔｏｔｙｐｅ增加的属性和方法，对象类型的只有一份，值类型的这会被复制．由于函数都是通用的，在上面的两种方法中根据具体开发时的业务场景自己选择吧，第二种性能比较好，因为避免了没有必要的复制，比较节省内存．但具体选择哪种方式进行继承，还是根据业务场景去自己定吧．

JS中的继承 原型链

第一种继承(属性继承)

第二种继承(原型继承prototype)

猜你喜欢

JS中的继承原型链