JS原型

JS原型

下面简单讲解一下关于原型的一些基础知识点，简单易懂。

---

学习原型，我们就要涉及到两个概念：构造函数、原型对象。

---

1、构造函数：通过 new 函数名，来实例化对象的函数叫做构造函数。

2、原型对象：任何函数在创建好的时候，浏览器会分配一个对象给这个函数，这个对象叫做原型对象，简称原型。通过new构造函数实例化出来的对象默认可以访问到这个对象的属性和方法。

3、任何函数天生自带一个属性叫 prototype，这个属性指向一个对象。

function Person(){

}
console.log(Person.prototype);

访问结果：

我们可以看下这个 prototype 属性的简单用法
给这个原型添加属性和方法，使用实例对象可以访问到：

function Person(){
    
}
Person.prototype.name = '张三';
Person.prototype.eat = function(){
    console.log("吃饭");
}
var obj = new Person();
console.log(obj); // 张三
obj.eat(); // 吃饭

这时候或许有个疑问，我们是在对象原型上加的属性和方法，为什么直接通过对象就可以访问到呢？

这时候就要说：对象在访问属性的时候，先找自己有没有，自己有就直接使用，自己没有就去原型对象上找。

4、还要说明一点，obj 就是那个构造函数 Person 创建出来的对象，这个 obj 对象中是没有 prototype 属性的，prototype属性只有在构造函数中有。

5、任何对象都有一个属性叫做__proto__ （左右分别两个下划线） 这个属性可以访问到对应的构造函数的原型对象，也就是构造函数的 prototype 属性的值。

var obj = new Person();
console.log(Person.prototype === obj.__proto__); // true

表示这两个对象是同一个 - 这个对象就叫原型。
下面一张图可以说明

上面讲了两个属性，不能记混了，简而言之：

• 任何函数天生自带属性prototype，指向一个原型对象
• 任何对象天生自带属性__proto__，指向一个原型对象

一个是函数的属性，一个是对象的属性。

下面还有一个原型对象天生自带的属性 constructor，这个属性所指的是这个原型对象所属的构造函数。

注意：constructor 与__proto__是不同的，__proto__是对象天生自带的属性，而 constructor 是原型对象天生自带的属性。

function Person(){
    
}
var obj = new Person();
console.log(obj.__proto__.constructor === Person); // true  
console.log(obj.constructor === Person); // true

obj 对象中没有 constructor 属性，所以去原型对象上找，因为我上面就说了，对象在访问属性的时候，先找自己有没有，自己有就直接使用，自己没有就去原型对象上找。

下面一张图总结一下三者的关系：
以上就是关于原型的一些基础知识点。