这么看，原型与原型链好像也不难

Javascript栏目简单明了介绍原型与原型链。

JS参考java的设计，使用new操作符生成对象，但其与java不同的是new后面跟的是 Construtor 而不是 Class 。

// java 中生成一个对象
Person p = new Person() // Person 指的是类名

// js 生成一个对象
function Person (age) {
    this.age = age
    this.nation = &＃39;China&＃39;
}
var father = new Person(42) // Person 指的是构造函数
var mingming = new Person(11) 

2. 构造函数 Constructor

构造函数也是普通函数，其也有 prototype 属性，与普通函数的区别是其要求首字母大写。若构造函数使用new操作符调用时，其需要执行四个步骤：
1. 创建一个新的对象
2. 将 this 指向这个新的对象
3. 执行构造函数，给新对象添加属性和方法
4. 返回这个新对象

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log(&＃39;eat&＃39;)
    }
}
var food = new Food(&＃39;banana&＃39;) 

3. 原型 prototype

任何一个函数都有一个 prototype 属性，它指向 prototype 对象。那么原型其实就是一个对象，在原型上定义的属性，通过继承（new 操作符实现），实例化的对象也拥有了该属性。
原型与构造函数的关系：构造函数内有一个 prototype 属性，通过该属性可以访问到原型。

简单来说，我们使用 new 操作符创建一个 food 实例，并且可以通过 instanceof 检验实例与构造函数之间的关系。

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log(&＃39;eat&＃39;)
    }
}
var food = new Food(&＃39;banana&＃39;)  // 实例化
var res = food instanceof Food // 检查 food 是否为 Food 实例
console.log(res) // true 

当我们在原型上定义一个属性时，实例也会"继承"这个属性。

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log(&＃39;eat&＃39;)
    }
}
var food = new Food(&＃39;banana&＃39;)  // 实例化
var res = food instanceof Food // 检查 food 是否为 Food 实例
console.log(res) // true

// 原型定义属性
Food.prototype.type = &＃39;object named Food&＃39;
var foodRes = food.type // 实例继承的属性
console.log(foodRes) // object named Food 

5. 隐式原型 __proto__

任何对象在创建时都会有一个 __proto__ 属性，它指向产生当前对象的构造函数的原型对象。由于该属性并非标准规定的属性，所以不要随便去更改该属性的值，以免破坏原型链。也就是说，实例可以通过 __proto__ 属性访问到原型。

对象中的 __proto__ 属性在所有实现中是无法访问到的，但是可以通过 isPrototypeOf() 方法来确定对象之间是否存在着这种关系。

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log(&＃39;eat&＃39;)
    }
}
var food = new Food(&＃39;banana&＃39;)  // 实例化
console.log(food.__proto__ === Food.prototype) // true
console.log(Food.prototype.isPrototypeOf(food)) // true 

6. 构造函数 constructor

构造函数可以通过 prototype 属性访问到原型，那么原型也是能够通过某种途径访问到构造函数的，其就是原型中的一个属性 constructor ，该属性并不是真正的构造函数，真正的构造函数是指 Constructor，两者不要混淆了。

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log(&＃39;eat&＃39;)
    }
}
var food = new Food(&＃39;banana&＃39;)
console.log(Food.prototype.cOnstructor=== Food) //true 

3. 然后通过这条生产线，雕刻出许许多多的复刻花瓶。（实例 food）

7. 原型链

proto 是任何对象都有的属性，在js中会形成一条 proto 连接起来的链条，递归访问 proto 直到值为 null ，这个搜索过程形成的链状关系就是原型链。

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log(&＃39;eat&＃39;)
    }
}
var food = new Food(&＃39;banana&＃39;)  // 实例化
// 原型链
console.log(food.__proto__) // Food {}
console.log(food.__proto__.__proto__) // {}
console.log(food.__proto__.__proto__.__proto__) // null 

如下图：

2. 原型对象上的默认属性 constructor 也是一个指针，指向其相关的构造函数。
3. 通过 new 操作符产生的实例对象都会有一个内部属性指向原型对象，该实例对象可以访问原型对象上的所有属性和方法。
4. 实例可以通过内部指针访问到原型对象，原型对象也可以通过 constructor 找到构造函数。
5. 每个构造函数都有一个原型对象，原型对象上包含一个指向构造函数的指针，实例包含一个指向原型对象的内部指针。
6. __proto___ 的指向取决于对象创建时的实现方式。
7. 构造函数实例，封装的函数，如果通过 new 操作符来调用则是构造函数，否则则不是。 8. 在整个原型链上寻找某个属性，对性能有影响，越是上层的原型对象，对性能的影响越大。
9. js中一切皆对象，通过 new Function 的是函数对象，其构造函数是 Function，而普通对象的构造函数则是 Object 。
10. 每一个对象都有 __proto__ 属性，而每一个函数对象才有 prototype 属性。

参考来源

1.《Javascript 高级程序设计》
2.developer.mozilla.org/zhCN/docs/W…

最后

如果你仔细阅读完本文，相信你对 Javascript 中的原型和原型链会有新的认识。如果你觉得对你有帮助，记得 点赞 哦！如果你发现我理解的有问题，也欢迎你在评论中指正出来。

相关免费学习推荐：Javascript(视频)

以上就是这么看，原型与原型链 好像也不难的详细内容，更多请关注 第一PHP社区 其它相关文章！