关于原型链

Posted admin-NaN

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于原型链相关的知识,希望对你有一定的参考价值。

1、所有的函数都是Function的实例对象
Function是函数,也是Function的实例对象
函数声明方式定义的函数都是实例对象
function foo(){
 
    }
    foo.call();
    var obj={
        info:123,
        showInfo:function(){
            console.log(this.info);
        }
    };
    obj.showInfo();
console.log(foo.__proto__===Function.prototype);
    console.log(Function.prototype===Function.__proto__);
2、原型对象prototype的本质是一个对象不是函数
3、Math是Object的对象,并且Math是一个对象不是函数
4、这些方法的__proto__最终都指向了Object.prototype;
Object.prototype.abc=123;
    function foo(){}
    console.log(foo.abc);
    console.log(Array.abc);
    console.log(Object.abc);
    console.log(Math.abc);
5、有两种方法来往原型中添加方法
第一种
function Student(name,age){
        this.name=name;
        this.age=age;
 
    }
    Student.prototype.showAge=function(){
        console.log(this.age);
    }
    Student.prototype.showName=function(){
        console.log(this.name);
    }
    console.dir(Student.prototype);
第二种
function Student(name,age){
        this.name=name;
        this.age=age;
 
    }
Student.prototype={
        showAge:function(){
            console.log(this.age);
        },
        showName:function(){
            console.log(this.name);
        }
 
    }
    console.dir(Student.prototype);
但是这两种方法有不同的地方
如果你输出上面的代码你就会方法第一种方法比第二种多了一个constructor属性。没有这个属性我们就不容易发现这个原型对象是属于谁的,所以我们在这个对象中手动添加了一个constructor属性。
Student.prototype={
        constructor:Student,
        showAge:function(){
            console.log(this.age);
        },
        showName:function(){
            console.log(this.name);
        }
 
    }
6、执行下面这个代码,你会发现第一添加的原型已经被覆盖掉了。
function Student(name,age){
        this.name=name;
        this.age=age;
 
    }
Student.prototype.showInfo=function(){
        console.log(‘hello‘);
    }
    Student.prototype={
        constructor:Student,
        showAge:function(){
            console.log(this.age);
        },
        showName:function(){
            console.log(this.name);
        }
 
    }
    console.dir(Student.prototype);
为了解决这个问题我们要把这个添加的原型放在用对象添加原型方法的代码的后面
  Student.prototype={
        constructor:Student,
        showAge:function(){
            console.log(this.age);
        },
        showName:function(){
            console.log(this.name);
        }
 
    }
    Student.prototype.showInfo=function(){
        console.log(‘hello‘);
    }
    console.dir(Student.prototype);
此时打印出来的是三个方法。
7、原型链的组成:实例对象+原型对象形成的链式结构
节点之间是通过__proto__属性连接的。
 
8、执行如下代码
function Foo1(){
        this.info1=123;
    }
    Foo2.prototype=new Foo1();
    function Foo2(){
        this.info2=456;
    }
    Foo3.prototype=new Foo2();
    function Foo3(){
        this.info3=789;
    }
    var f3=new Foo3();
    console.dir(f3);
 
 
    此时的原型链指向:
    f3->new Foo2()->new foo1()->Foo1.prototype->Object.prototype->null

以上是关于关于原型链的主要内容,如果未能解决你的问题,请参考以下文章

关于原型原型链和原型继承的理解

关于js中原型链的理解

关于JS 的原型和原型链

关于JS原型原型链继承的问题

关于JavaScript的原型继承与原型链

关于对象构造函数原型原型链继承