系列文章推荐

JavaScript原型与原型链（基础篇）
JavaScript原型与原型链（进阶篇）
JavaScript原型与原型链（总结篇）

1 构造函数和实例对象

构造函数的prototype属性为其实例化对象的原型__proto__：

function Cat(name, age) {this.name = namethis.age = age
}
const kat = new Cat('kat', 2)
console.log(kat.__proto__ === Cat.prototype) // true

2 构造函数属性`constructor`

constructor属性用于通过实例对象或原型获取其构造函数：

function Cat(name, age) {this.name = namethis.age = age
}
const kat = new Cat('kat', 2)console.log(kat.__proto__.constructor === Cat) // true
console.log(Cat.prototype.constructor === Cat) // true

注意：kat.constructor === Cat也是成立的，虽然constructor属性不在实例对象kat上，但是在访问属性时若实例本身不存在，则会在原型链上寻找，所以能在kat.__proto__上找到constructor属性。

3 `Object`

Object构造函数有两大特点：

所有构造函数的原型对象都是Object构造函数的实例对象，即满足Func.prototype.__proto__ === Object.prototype，其中Func代指所有构造函数；
Object.prototype.__proto__为原型链的终点，即Object.prototype.__proto__ === null；

function Cat(name, age) {this.name = namethis.age = age
}
const kat = new Cat('kat', 2)console.log(kat.__proto__.__proto__ === Object.prototype) // true
// kat.__proto__ === Cat.prototype
console.log(Cat.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__ === null) // true

4 `Function`

Function构造函数有两大特点：

所有构造函数都是由Function构造函数实例化而来：Func.__proto__ === Function.prototype，其中Func代指所有构造函数；
Function自身是构造函数，且自身又是自身构造函数的实例化对象：Function.__proto__ === Function.prototype。

function Cat(name, age) {this.name = namethis.age = age
}console.log(Cat.__proto__ === Function.prototype) // true
console.log(Function.__proto__ === Function.prototype) // true

5 `Object`和`Function`

Object和Function两个内置构造函数区别与其他内置构造函数，有如下特点，以下所有的运算结果都为true：

Function instanceof Object
Object instanceof Function
Function instanceof Function
Object instanceof Object

根据上述结论还能推导及验证出如下关系：

Function.__proto__.__proto__ === Object.prototype
Object.__proto__ === Function.prototype
Function.__proto__ === Function.prototype
Object.__proto__.__proto__ === Object.prototype

6 `function anonymous()`

所有构造函数的原型都为function anonymous()，由于所有函数都是由Function构造函数实例化而来，那么最简单的获取function anonymous()的方式为Function.prototype，满足如下关系：

function Cat() {}
console.log(Cat.__proto__ === Function.prototype) // true
console.log(Object.__proto__ === Function.prototype) // true
console.log(Array.__proto__ === Function.prototype) // true
console.log(Number.__proto__ === Function.prototype) // true
console.log(Function.__proto__ === Function.prototype) // true

7 `proto`和`prototype`

__proto__用于实例对象获取原型，prototype用于构造函数获取其实例对象的原型，两者关系如下：

function Cat() {}
const kat = new Cat()
console.log(kat.__proto__ === Cat.prototype) // true
console.log(Cat.__proto__ === Function.prototype) // true
console.log(Function.__proto__ === Function.prototype) // true

对于__proto__，有如下几种情况：

对于一般实例对象来说，如实例对象kat，kat.__proto__得到的是其构造函数Cat的prototype属性；
对于一般构造函数来说，如构造函数Cat，Cat.__proto__得到的是其构造函数Function的prototype属性，且这个值是确定的，为function anonymous()；
对于构造函数Function来说，Function.__proto__得到的是其构造函数Function的prototype属性，且这个值是确定的，为function anonymous()。

对于prototype，有如下几种情况：

对于一般实例对象来说，如实例对象kat，kat.prototype得到的是undefined，即一般实例对象是没有prototype属性的，只有构造函数才存在prototype属性；
对于一般构造函数来说，如构造函数Cat，Cat.prototype得到的是由该构造函数实例化对象的原型，在本例子中为kat.__proto__；
对于构造函数Function来说，Function.prototype得到的是由该构造函数实例化对象的原型Function.__proto__，因为Function自身是构造函数，且自身又是自身构造函数的实例化对象，所以Function.__proto__ === Function.prototype。

8 其他内置构造函数

JavaScript中的内置构造函数只有Function和Object是特殊的，除去Function和Object以外的其他构造函数，如Number、String和Array等等，都可以当作普通构造函数来看待。

JavaScript原型与原型链（总结篇）相关推荐

web前端面试高频考点——JavaScript 篇（一）【JS的三座大山】原型和原型链、作用域和闭包、异步
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容参考链接 HTML & CSS 篇 ...
从原型到原型链，修炼JavaScript内功这篇文章真的不能错过！系列（二）
从原型到原型链 JavaScript基础提升合集
java原型链_深入总结Javascript原型及原型链
本篇文章给大家详细分析了javascript原型及原型链的相关知识点以及用法分享,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 我们创建的每个函数都有一个 prot ...
JavaScript深入之从原型到原型链
JavaScript深入系列的第一篇,从原型与原型链开始讲起,如果你想知道构造函数的实例的原型,原型的原型,原型的原型的原型是什么,就来看看这篇文章吧. 构造函数创建对象我们先使用构造函数创建一个对 ...
深入 javascript 之原型和原型链！！！
前言 js中有不少比较难以理解的概念,比如 js原型和继承 .我曾经很早的时候就看过js原型方面的知识,并在当时写了一篇博客作为记录,很显然当时的我只是死记硬背.最近我利用空闲的时间将一些相对 ...
JavaScript 原型和原型链及 canvas 验证码实践
前言最近在复习 JavaScript 基础,因为工作以后基本上没用过,天天都是拿起框架加油干,确实大部分都忘了.到了原型和原型链这一部分,觉得自己理解的比较模糊.又翻阅了<你不知道的 Java ...
深入javascript之原型和原型链
原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型链会是面试中必不可少的话题.看完此篇文章一定会让你对原型,原型链有深刻全面的了解. 深 ...
【JavaScript 进阶教程】“原型“与“原型链“【上篇】
文章目录: 一:构造函数 1.1 构造函数使用方法 1.2 构造函数new的执行过程 new 执行过程 1.3 实例成员与静态成员二: 原型对象 prototype 2.1 为什么有原型对象 2.2 ...
JavaScript高手之路：原型和原型链
原型和原型链是JavaScript进阶重要的概念,尤其在插件开发过程中是不能绕过的知识点,这篇文章就带你抽丝剥茧的学习这一过程. 由一个例子开始说起在写博客过程中,我比较倾向和习惯从一个按例开始说起 ...

JavaScript原型与原型链（总结篇）

系列文章推荐

1 构造函数和实例对象

2 构造函数属性`constructor`

3 `Object`

4 `Function`

5 `Object`和`Function`

6 `function anonymous()`

7 `proto`和`prototype`

8 其他内置构造函数

JavaScript原型与原型链（总结篇）相关推荐

最新文章

热门文章

JavaScript原型与原型链（总结篇）

系列文章推荐

1 构造函数和实例对象

2 构造函数属性constructor

3 Object

4 Function

5 Object和Function

6 function anonymous()

7 __proto__和prototype

8 其他内置构造函数

JavaScript原型与原型链（总结篇）相关推荐

最新文章

热门文章

2 构造函数属性`constructor`

3 `Object`

4 `Function`

5 `Object`和`Function`

6 `function anonymous()`

7 `proto`和`prototype`