js原型和原型链总结

204 阅读2分钟

原型

普通对象和函数对象

在js中万物皆对象,对象分为普通对象和函数对象,object和function都是js中自带的函数对象。

var a={};  //object
var b=new object();  //object
var c=new f1();   //object

function f1(){};  //function
var f2=function(){};    //function
var f3=new function("a","b");   //function

凡是通过new Function()创建的对象都是函数对象,其他的是普通对象,function和object也是通过Function()创建的

构造函数

function Person(name,age){
   this.age=age;
   this.name=name;
   this.helloName=function(){
       console.log(this.name);
   }
}
var person1=new Person("lily",18);
var person2=new Person("luck",29);

上面代码中的person1和person2都是构造函数Person的实例,这两个实例都有一个constructor属性,该属性(是一个指针)指向他们的构造函数Person。

person1.constructor==Person
person2.constructor==Person

实例的构造函数属性(construtor)指向构造函数

原型对象

Js中每当定义一个对象(函数也是对象),对象都会包含一些预定义的属性,其中每个函数对象(可以理解为构造函数)都有一个 prototype属性,指向函数对象的原型对象。

function Person(){
    Person.prototype.age=20;
    Person.prototype.name="lily";
    Person.prototype.helloName=function(){
        console.log(this.name);
    }
}
var person1=new Person();
person1.hellName(); //lily

简单来说,原型对象也是一个普通对象(Function.prototype除外,他是一个函数对象),例如Person.prototype就是一个普通对象,我们给这个普通对象添加了三个属性,age,name,helloName。其中还有一个默认的constructor属性。

在默认情况下,所有的原型对象都会自动获得一个默认的constructor(构造函数属性)属性。 这个属性指向prototype属性所在的函数(Person),可以理解为:

Person.prototype.constructor == Person  
//我觉得person.prototype可以理解为是Person的构造函数(原型对象时构造函数的实例)
//和上面结合起来,实例的构造函数属性(construtor)指向构造函数,是不是好理解点了

原型对象的作用

这个原型对象包含了特定类型的所有实例的属性和方法,即原型对象是用来给实例对象来共享属性和方法。
所以实例对象继承了通过prototype设置的属性
function Person(name){
   this.name=name
}
Person.prototype.getName=function(){
    return this.name
}
var person1=new Person("nick");
person1.getName(); //nick

__ proto __

JS在创建对象时(不管是普通对象还是函数对象)都有一个_proto_的内置属性,用于指向创建它的构造函数的原型对象

peron1._proto_ == Person.prototype
//根据上面的也可以等到
peron.prototype.contructor == Person
peron1.contructor == Person

原型链

当我们实例化Person得到实例化对象person1,访问实例化对象的属性时会触发getName方法,它会先在person1自身属性上查 找,如果没有这个属性,就会通过__proto__属性去他的构造函数的原型对象(person1.proto==Person.prototype)中查找,一层层向上直到查找到顶层对象Object,这个查找的过程就是原型链。

如有不妥之处 请大佬们多多指教