js原型和原型链的理解（透彻）

1，原型

function Fn() {}

1）Fn是一个构造函数，每个构造函数都会自动生成一个prototype属性，指向一个空对象，这个空对象就是原型。每一个实例对象都会从原型继承属性和方法。

2）原型对象中有一个属性constructor, 它指向函数对象
console.log(Date.prototype.constructor===Date)

2，显示原型和隐式原型
1）每个函数function都有一个prototype，即显式原型(属性)
2）每个实例对象都有一个__proto__，可称为隐式原型(属性)
3）对象的隐式原型的值为其对应构造函数的显式原型的值

4）内存结构(图)

 //定义构造函数function Fn() {   // 内部语句: this.prototype = {}}// 1. 每个函数function都有一个prototype，即显式原型属性, 默认指向一个空的Object对象console.log(Fn.prototype)// 2. 每个实例对象都有一个__proto__，可称为隐式原型//创建实例对象var fn = new Fn()  // 内部语句: this.__proto__ = Fn.prototypeconsole.log(fn.__proto__)// 3. 对象的隐式原型的值为其对应构造函数的显式原型的值console.log(Fn.prototype===fn.__proto__) // true//给原型添加方法Fn.prototype.test = function () {console.log('test()')}//通过实例调用原型的方法fn.test()

总结:
* 函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
* 对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
* 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

3，原型链

以下两张图阐述的非常详细，感谢尚硅谷课程：http://www.atguigu.com/

1). Object的构造函数/原型/实例之间的关系（图解）

var o1 = new Object();
var o2 = {};

2). 构造函数/原型/实例对象的关系(图解)

function Foo(){ }

*说明：

1）函数是Function的实例，如下图的两行代码是相等的，所以Foo是有__proto__的

2）Function也是个函数，它是new自身产生：Function = new Function()，所以所有函数对象的__proto__都是一样的

3）*所有函数的显示原型prototype是new Object()，所有函数对象都是new Function()生成的

4. 需要注意的点

 /*1. 函数的显示原型指向的对象默认是空Object实例对象(但Object不满足)*/console.log(Fn.prototype instanceof Object) // trueconsole.log(Object.prototype instanceof Object) // false, Object.prototype.__proto__ === nullconsole.log(Function.prototype instanceof Object) // true/*2. 所有函数都是Function的实例(包含Function)*/console.log(Function.__proto__===Function.prototype)  //true/*3. Object的原型对象是原型链尽头*/console.log(Object.prototype.__proto__) // null

js原型和原型链的理解（透彻）相关推荐

js作用域及作用域链概念理解及使用
之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包,觉得写得很清晰,可以简单理解闭包产生原因,但看评论都在说了解了作用域链和活动对象才能真正理解闭包,起初不以为然,后来在跟公司同事交流的时 ...
js原型和原型链_理解JS中的原型和原型链
导读:JavaScript中(JS)的原型和原型链是web前端开发面试中经常被问到的问题:同时,如果我们能很好的理解JS中的原型和原型链,对于控制台输出的很多信息我们也能更好的理解,而原型链也是实现继 ...
JS原型与原型链理解
前几天在看那个OL3的控件封装,感觉对愿原型和原型链有点忘记,js本身是没有类这个概念,所谓函数即对象,继承这个东西主要通过对象来完成,要是在C#,Java这类语言中这个就很好理解的一,函数对象 ...
JS 中原型和原型链深入理解
作者: erdu segmentfault.com/a/1190000014717972 首先要搞明白几个概念: 函数(function) 函数对象(function object) 本地对象(nat ...
《js中原型和原型链的深入理解》的笔记
前言:在微信公众号前端大全上看过<js中原型和原型链的深入理解>,个人认为这是我看过的js原型链的文章中,在思维结构上理解最清楚的一个文章了,本着温故而知新,有害怕找不到这个文章,我就把文 ...
JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有"prototype"属性,函数对象有"prototype"属性,原型对象有&q ...
（五）JS基础知识二（通过图理解原型和原型链）【三座大山之一，必考！！！】
JS基础知识二(原型和原型链) 提问 class 继承类型判断(instanceof) 原型原型关系基于原型的执行规则原型链说明提问如何准确判断一个变量是不是数组 class的原型本质 ...
js中原型，原型链，原型链继承的个人理解
一.什么是原型? 每一个javascript对象在创建的时候就会有一个与之关联的对象B产生,对象B就是所说的"原型". 1)原型也是一个对象,其他对象可以通过原型实现属性继承, 2 ...
真正理解JS原型和原型链
什么是原型.原型链首先我们要搞明白原型的概念,什么原型? 每个对象都可以指定另一个对象来作为自己的原型,并继承原型的所有属性.那么对象当然是由构造函数创建的,那我们是不是就可以在声明构造函数的时候就 ...
浅谈JS原型与原型链（一）
最近学习JavaScript原型与原型链的时候,被这块知识烧得脑壳疼,prototype与__proto__混淆不清.网上各种图解,都画的好复杂,绕老绕去,不明所以,看得越来越糊涂.还是亲自动手敲敲, ...

js原型和原型链的理解（透彻）

js原型和原型链的理解（透彻）相关推荐

最新文章

热门文章