JavaScript之原型解析（上）

lushan 发布于2019-08-21 17:03 / 1350人阅读

摘要：前言原型这个概念在这门语言中是一个核心关键的知识点，但是你是否真的已经完全理解透彻了呢可能我个人的理解能力较差，因此经过多次翻阅书籍和实践我才真正了解原型，所以记录下来以加深理解，也以便日后深入探讨。

前言

原型这个概念在JavaScript这门语言中是一个核心关键的知识点，但是你是否真的已经完全理解透彻了呢?可能我个人的理解能力较差，因此经过多次翻阅书籍和实践我才真正了解原型，所以记录下来以加深理解，也以便日后深入探讨。如有不正确的地方，欢迎斧正！

原型涉及到的概念


__proto__/[[prototype]]

prototype
constructor

区分原型指针和原型属性

注：首先要区分的是原型指针__proto__/[[prototype]]和原型属性prototype，很多时候我们可能会把它们混为一谈，但是两者实际上不是同一种东西！！！

原型指针__proto__/[[prototype]]

先来看一个例子：

var obj = {};
function fn() {};
console.log(obj.__proto__ === Object.prototype); // true
console.log(obj.__proto__ === Object.getPrototypeOf(obj)); // true
console.log(fn.__proto__ === Function.prototype); // true
console.log(fn.__proto__ === Object.getPrototypeOf(Function)); // true

实际上，实例对象的原型指针[[prototype]]在某些宿主环境下是不能读取到的；
但也有例外:
(1) 在浏览器环境下原型指针可以使用__proto__属性读取到
(2) ECMAScript 5版本增加的新方法Object.getPrototypeOf()可以进行读取到

解释：
每个对象在创建的时候都会有个原型指针的属性指向负责构造该对象的原型对象，以上面为例 ->
obj是由原型对象Object.prototype构造的，等同于使用new Object构造
fn是由原型对象Function.prototype构造的，等同于使用new Function构造

经典的原型链图示

谨记，往原型链向上追溯，最终都是由原型对象Object.prototype进行构造！

原型属性prototype

再来个栗子：

var obj = {};
function fn() {};
console.log(obj.prototype); // undefined
console.log(fn.prototype === Object.prototype); // false
console.log(fn.prototype === new fn().__proto__); // true
console.log(fn.prototype === Object.getPrototypeOf(new fn)); // true

解释：
以前我一直混淆的概念就在这里，
为什么obj.prototype是undefined呢?
为什么fn.prototype指向的不是Object.prototype?
如果你跟我一样有这样的疑惑的话，说明你理解错了原型指针__proto__/[[prototype]]和原型属性prototype的概念！！！

/**
* 1. 如果你想得到构造某对象的原型对象，你应该读取该对象的原型指针
* 2. 然而，读取某对象的原型属性prototype时，你的意图应该是想以该对象作为原型对象进行构造实际对象
/
// 这就解析了为什么，实例对象new fn的原型指针__proto__指向了fn.prototype(fn的原型属性)
// 另外，因为obj是普通对象，不可以使用new关键字进行构造实例，因此自然也就没有原型属性了 -> undefined

如果还有疑惑，建议结合上面经典的原型链图示进行思考！

构造器指针constructor

老规矩，上代码

var obj = {};
function fn() {};
console.log(obj.constructor === Object); // true
console.log(fn.constructor === Function); // true
console.log(obj.hasOwnProperty("construnctor")); // false
console.log(fn.hasOwnProperty("construnctor")); // false

通过以上代码，我们可以知道，其实obj和fn对象自身并没有constructor这个属性，实际上constructor是构造他们的原型对象上面的属性，并且指向构造对象本身！（once again，如果还有疑惑请建议结合上面经典的原型链图示进行思考！）

参考文献

javascript高级程序设计（第三版）——[美]Nichilas C.Zakas 著

javascript权威指南（第6版）——David Flangan 著淘宝前端团队译

GPU云服务器云服务器 javascript原型解析javascript 原型原型链解析服务器上的xml

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89079.html

独家解析Javascript原型继承 - 之函数原型和AOP

摘要：引子独家解析原型继承已经比较全面的分析了自定义函数类型，内置基本类和内置对象类型的的以及的原型链。鉴于函数是的一等公民，另辟新篇介绍函数的原型及其应用。函数本身也是对象，它遵循独家解析原型继承所描述的自定义函数类型对象的原型法则。引子独家解析Javascript原型继承已经比较全面的分析了自定义函数类型，JS内置基本类(undefined, null, bool, number, ...

ispring 2019-08-20 18:02 评论0 收藏0
进击JavaScript之（四）原型与原型链

摘要：每一个由构造函数创建的对象都会默认的连接到该神秘对象上。在构造方法中也具有类似的功能，因此也称其为类实例与对象实例一般是指某一个构造函数创建出来的对象，我们称为构造函数的实例实例就是对象。表示该原型是与什么构造函数联系起来的。本文您将看到以下内容：传统构造函数的问题一些相关概念认识原型构造、原型、实例三角结构图对象的原型链函数的构造函数Function 一句话说明什么...

XBaron 2019-08-20 10:45 评论0 收藏0
进击JavaScript之（一）变量声明提升

摘要：如下代码输出的结果是代码执行分为两个大步预解析的过程代码的执行过程预解析与变量声明提升程序在执行过程中，会先将代码读取到内存中检查，会将所有的声明在此进行标记，所谓的标记就是让解析器知道有这个名字，后面在使用名字的时候不会出现未定义的错误。 showImg(https://segmentfault.com/img/remote/1460000012922850); 如下代码输出的结果是...

LeexMuller 2019-08-20 10:13 评论0 收藏0
学习JavaScript之原型链

原型链之前一直都不是很理解，这两天把《你不知道的JavaScript》和《JavaScript高级程序设计》的原型链那章看完后有所理解，在这里先记下来，加深印象。什么是原型对象要讲清楚什么是原型链需要从原型对象开始谈，那么什么是原型对象呢？《JavaScript高级程序设计》中是这样讲的：无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属...

Leo_chen 2019-08-22 11:04 评论0 收藏0
前端面试之JavaScript（总结）

1. JS基本的数据类型和引用类型基本数据类型：number、string、null、undefined、boolean、symbol -- 栈引用数据类型：object、array、function -- 堆两种数据类型存储位置不同原始数据类型是直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据；引用数据类型存储在堆(heap)中的对象，占据空间大、大...

tomato 2019-08-22 18:04 评论0 收藏0