我们知道无论什么时候只要创建了一个函数,就会为该函数创建一个prototype属性,这个属性指向函数的原型对象,默认情况下所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含了一个指向prototype属性所在函数的指针。当调用构造函数创建一个新实例后,该实例内部就会包含一个[[prototype]]指针(内部属性),指向构造函数的原型对象。例如以下的代码:

    function Person(){
}
Person.prototype.name = "pan";
Person.prototype.age = 23;
};
var person1 = new Person();

这段代码中Person构造函数、Person的原型属性以及Person的现有实例person之间的关系可以用下图来表示:

在这里,Person.prototype指向了原型对象,而Person.prototype.constructor又回指了Person。实例person1包含了一个指向Person.prototype的内部属性[[Prototype]]。

现在来看看我们上面的图是否说对了呢?

    function Person(){
}
Person.prototype.name = "pan";
Person.prototype.age = 23;
var person1 = new Person();
console.log(Person.prototype);
console.log(person1.__proto__);
console.log(Person.prototype.constructor);
console.log(person1.__proto__.constructor);
console.log(person1.name);

我们可以看到Person.prototype与person1.__proto__都是同一个对象Person{},所以Person.prototype.constructor和person1.__proto__.constructor都是Person这个函数。又因为person1可以利用原型链向上查找到Person.prototype的属性并使用,所以person1.name的值为pan。

原型链

prototype是函数的一个内置属性,这个属性是一个指针,指向原型对象;

_proto_([[prototype]])是对象的内置属性,而函数也是一个对象,所以就会形成一条_proto_连起来的链条,形成原型链,递归访问_proto_的尽头是null

举个栗子:

var A = function(){}
var a = new A();

会有如下的原型链关系

a的_proto_指向A.prototype(A的原型对象),A.prototype的_proto_指向Object.prototype(Object的原型对象),Object.prototype的_proto_最终指向的是null

下面是一张更详细的原型链图(来自网上)

关于js中的原型链的理解的更多相关文章

  1. 理解js中的原型链

    对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性. 关于原型 在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承 ...

  2. 理解js中的原型链,prototype与__proto__的关系

    说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: 1 <script type="text/javascript"> 2 var Pers ...

  3. 【转】理解js中的原型链,prototype与__proto__的关系

    说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: 1 <script type="text/javascript"> 2 var Pers ...

  4. [转]理解js中的原型链,prototype与__proto__的关系

    本文转自:http://rockyuse.iteye.com/blog/1426510 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: 1 <script typ ...

  5. JS中注意原型链的“指向”

    昨天压缩Js文件时发现了项目中的一个prototype的问题代码如下所示: 1. <script> var XXX = function(){ }; var x1 = new XXX(); ...

  6. JS中的原型链和原型的认识

    这篇文章主要是学习一下JavaScript中的难点------原型和原型链 自定义一个对象 我们学习一门编程语言,必然要使用它完成一些特定的功能,而面向对象的语言因为符合人类的认知规律,在这方面做得很 ...

  7. js 中的原型链与继承

    ECMAScript中将原型链作为实现继承的主要方法,其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 1.原型链 先回忆一下构造函数和原型以及实例的关系:每个构造函数都有一个原型对 ...

  8. 深入理解JS对象和原型链

    函数在整个js中是最复杂也是最重要的知识 一个函数中存在多面性: 1.它本身就是一个普通的函数,执行的时候形成的私有作用域(闭包),形参赋值,预解释,代码执行,执行完 成后栈内存销毁/不销毁. 2.& ...

  9. 谈谈我对 js原型链的理解

    想要学习 “原型链” 必须要认识什么是 “原型” 和 “原型链” 先理解一下普通的继承和原型的区别,下面写一段js代码来帮助理解: var Animal = function(){ // 动物抽象类 ...

随机推荐

  1. IOS开发如何入门

    说到 iOS 开发,自己学得也很浅.不过至少独立一人完成了一个应用的开发到项目上线整个过程.分享一下自己的建议和想法. 首先建议阅读 Start Developing iOS Apps Today,你 ...

  2. JQuery归纳总结(增加中...)

    一.this与$(this)的区别 this指向标签本身对象,而$(this)会将其封装成JQuery对象 如: $(" img").mousemove( function(e){ ...

  3. maven-surefire-plugin

    本文参考自:https://www.cnblogs.com/qyf404/p/5013694.html surefire是maven里执行测试用例(包括testNG,Junit,pojo)的插件,他能 ...

  4. 项目总结--基于Cortex-A9平台的米兰花智能培育系统

    基于Cortex-A9平台的米兰花智能培育系统 1. 系统功能概述 本系统主要实现了模拟米兰花智能培育的过程.通过前端传感器采集相关环境因子数据经ZigBee组网发送到协调器汇总,网关通过串口读取协调 ...

  5. 利用MacBook Air入侵无线网络

    目前无线网络的加密方式主要有WEP,WPA/WPA2.这是最常看到的加密方式,最近由于需要,专门去研究了一下如何入侵无线网络. 1.入侵WEP加密的无线网络 WEP加密方式现在已经很不安全了,因为只要 ...

  6. 斜率优化dp学习

    用了一堂半的课才彻底搞懂.其他神犇写的博客或多或少有点小bug,所以orzzz不才斗胆重新写一个. 里面大量穿用其他神犇的原话,就不逐一标明出处了. 引用资料 Accept的博客 MathonL的博客 ...

  7. 爬虫框架Scrapy之详解

    Scrapy 框架 Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛. 框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网页 ...

  8. HTTP-API-DESIGN 怎样设计一个合理的 HTTP API (一)

    这个附件的幻灯片是我最近给团队分享关于设计 HTTP API 的时候,结合 这篇 和我们团队历史上的一些错误,总结出来一些适合内部的经验. 简介. 这次分享主要关注以下几部分: HTTP + JSON ...

  9. Python学习札记(十四) Function4 递归函数 & Hanoi Tower

    reference:递归函数 Note 1.在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. eg.计算阶乘: #!/usr/bin/env python3 def ...

  10. Linux计划任务,自动删除n天前的旧文件

    Linux计划任务,自动删除n天前的旧文件 linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,但需求总是多方面的嘛-我就觉得让系统定时 ...