JS原型、原型对象的理解

JS原型、原型对象的理解

原型：

原型(prototype)是每个函数都具有的一个属性，本质上是一个指针，指向的是函数的原型对象。
例如：

function Person(Name){
    this.name=Name
}
Person.prototype//可以查看当前Person函数的原型对象。

原型对象

函数中的protype属性所指向的对象，这个对象的用途就是可以指定特定类型的所有实例共享的一个方法和属性，我们不必在构造函数声明一个对象实例的信息。
例如:

function Person(){}   //声明一个空的构造函数，构造函数不成文的规定以大写字母开头
Person.prototype.say=function(){
    console.log('说话')
}
let p1=new Person()
let p2=new Person()
p1.say()  //说话
p2.say()  //说话
//可以看到p1、p2都是Person构造函数的实例，且他们都具有say这个方法。

原型对象中具有constructor属性，本质上也是个指针，他指向的是Prototype属性所在的一个函数。即

Person.prototype.constructor==Person //true

实例

当我们调用构造函数来创建一个实例的时候，内部会产生一个指针[[prototype]]，这个指针指向的是原型对象，但是在标准中我们是获取不到这个指针的，但是chrome、firefox等浏览器给了我们一个非标准的属性_proto_，我们可以通过调用实例的这个属性来查看原型对象。
虽然我们无法直接访问[[prototype]]属性，但是我们可以通过isPrototypeOf()方法来确定是否存在这个关系。

Person.prototype.isPrototypeOf(p1) //true

在ECMAScript5中新增了一个方法可以返回[[prototype]]这个指针，Object.getPrototypeOf()

Object.getPrototypeOf(p1)==Person.prototype//true

我们在实例中使用属性或者方法的时候，首先会搜索实例本身，如果找到了该方法或者是属性就会直接调用，没有的话则会去原型对象中进行搜索。

function Person(){
    this.say=function(){
        console.log('构造函数中的方法')
}
}

Person.prototype.say=function(){
    console.log('函数原型中的方法')
}
let p=new Person()

p.say()  // 构造函数中的方法

上述示例在之前的构造函数中加了一个和原型方法同名的函数。我们new实例在调用后可以看到他是执行了构造函数中的方法，从这就可以看到他是优先执行实例中的方法的（我们可以通过hasOwnProperty来判断属性或者方法是否存在于实例中的。）

p.hasOwnProperty('say') //true

实例、构造函数、原型对象三者的关系。

总结:

理解了原型和原型对象对后面对象的继承有很大的帮助