经过多次的翻阅书籍终于对原型链在实际代码中的应用有了新的认识,但是不知道是否有错误的地方,还请大神多多指教。

构造函数、原型和实例的关系:每个构造函数都有一个原型对象funName.prototype,原型对象有一个指向构造函数的内部指针constructor,实例对象包含一个指向原型对象的内部指针__proto__(保证了实例可以访问构造函数原型内部所有的)。

(1)       万物皆对象,函数也是对象。函数(function)是对象,函数的原型(function.prototype)也是对象。它们(函数和对象)具有对象的共同特点。即对象都有_proto_属性(隐式原型),它指向构造函数的原型对象。保证了实例可以访问构造函数原型中所有的方法和属性。

(2)       函数(function)除了_proto_属性外,还有prototype属性。这个属性是一个指针,指向一个该构造函数的原型对象,该对象包含所有可以共享的属性和方法。即new Object().__proto__ ===Object.prototype为true。

实例1:原型模式创建对象

代码:

function Person(){};
var p = new Person();
console.log(p.__proto__ == Person.prototype);//true
//实例对象的_proto__指向其构造函数的原型对象。 console.log(Person.prototype.constructor == Person);//true
//原型对象的constructor指向构造函数 console.log(Person.__proto__ == Function.prototype);//true
// 构造函数的__proto__指向其构造函数Function的原型对象,即Function.prototype console.log(Person.prototype.__proto__== Object.prototype);//true
//原型对象的__proto__指向其构造函数Object的原型对象,即Object.prototype

实例2:原型链继承

var Person = function(){};
var Child = function(){};
Child.prototype = new Person();
var pp = new Child();
console.log(pp.__proto__ == Child.prototype); // true
//实例对象的__proto__ 指向构造函数原型对象 console.log(Child.prototype.__proto__ == Person.prototype);//true
// 子构造函数原型对象的__proto__指向父类的原型对象 console.log(pp.__proto__.__proto__ == Person.prototype);//true
// 所以子实例对象的__proto__.__proto__ 指向父原型对象 console.log(Child.__proto__ == Function.prototype);//true
//子构造函数的proto指向Function的原型对象(见第二行代码) console.log(Person.__proto__ == Function.prototype);//true
//父构造函数的__proto__指向Function的原型对象(见第一行代码) console.log(Person.prototype.__proto__ == Object.prototype );//true
//父原型对象的__proto__指向其Object的原型对象 console.log(Person.prototype.constructor == Person );//true
//父原型对象的constructor 指向 父构造函数 console.log(Child.prototype.constructor == Person); // true
//子原型对象的conmstructor指向父构造函数(见第三行代码)

综上所述,只要熟记函数和对象的__proto__属性指向其构造函数原型对象,函数的prototype也指向构造函数的原型对象,原型对象有一个指回构造函数的指针constructor。

javaScript之深度理解原型链的更多相关文章

  1. JavaScript之继承(原型链)

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

  2. javascript中继承(一)-----原型链继承的个人理解

    [寒暄]好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解. 总的说来, ...

  3. javascript 重难点(原型链 this) 理解总有一个过程,不要急,循序渐进!

    开始补充: 1. 将函数定义作为对象的属性,称之为对象方法.2. this的指向是由它所在函数调用的上下文决定的(语境),而不是由它所在函数定义的上下文决定的.3. 因为当一个函数作为函数而不是方法来 ...

  4. JavaScript高级内容:原型链、继承、执行上下文、作用域链、闭包

    了解这些问题,我先一步步来看,先从基础说起,然后引出这些概念. 本文只用实例验证结果,并做简要说明,给大家增加些印象,因为单独一项拿出来都需要大篇幅讲解. 1.值类型 & 引用类型 funct ...

  5. JavaScript 随笔2 面向对象 原型链 继承

    第六章 面向对象的程序设计 1.创建对象的几种方式 A)工厂模式 function CreatObj(name,sex,age){ this.name=name; this.sex=sex; this ...

  6. javascript 创建对象及对象原型链属性介绍

    我们知道javascript里定义一个普通对象的方法,如: let obj = {}; obj.num = 1; obj.string = 'string'; obj.func = function( ...

  7. Javascript之继承(原型链方式)

    1.原型链 原型链是JavaScript中继承的主要方法. 每个构造函数都拥有一个原型对象,原型对象都包含一个指向构造函数的指针(constructor),实例都包含一个指向原型对象的内部指针(__p ...

  8. javascript精髓篇之原型链维护和继承.

    一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了. 其实啊,光靠这一个属性是无法完成jav ...

  9. javascript 面向对象 new 关键字 原型链 构造函数

    JavaScript面向对象JavaScript 语言使用构造函数(constructor)作为对象的模板.所谓"构造函数",就是专门用来生成实例对象的函数.它就是对象的模板,描述 ...

随机推荐

  1. Django模型系统——ORM中跨表、聚合、分组、F、Q

    核心知识点: 1.明白表之间的关系 2.根据关联字段确定正反向,选择一种方式 在Django的ORM种,查询既可以通过查询的方向分为正向查询和反向查询,也可以通过不同的对象分为对象查询和Queryse ...

  2. Ubuntu12.04等的输入法问题 中英文切换 fitcx

    一般乌班图系统安装的时候会提醒大家选择安装的输入法,若大家选择中文安装,那么支持中文没得说,当选择英文安装的时候,发现整个系统环境是英文,并且根本不能输入中文,想baidu一下都是用pinyin百度, ...

  3. 什么是DDOS攻击?怎么防御?

    一.什么是DDOS? DDOS是英文Distributed Denial of Service的缩写,意即"分布式拒绝服务",那么什么又是拒绝服务(Denial of Servic ...

  4. HDU OJ 2159 FATE

    #include <stdio.h> #include <string.h> ][] ; ]; //»ñµÃ¾­Ñé ]; //»¨·ÑµÄÈÌÄÍ¶È int main() ...

  5. 算法(Algorithms)第4版 练习 1.5.1

    id数组的变化情况: 0 1 2 3 4 5 6 7 8 9 10 components 9 0 0 1 2 3 4 5 6 7 8 0 9 components 3 4 0 1 2 4 5 6 7 ...

  6. eclipse中使用git技巧总结

    之前一直使用svn,刚使用git还是有些蹩脚,今天总结下在使用git中常用技巧 1. ①.整个版本还原 当需要还原到某个版本时(多文件),操作如下 右击项目-->Team-->Show i ...

  7. Python- 列表内置方法

    列表,元组 查 索引(下标) ,都是从0开始 切片 .count 查某个元素的出现次数 .index 根据内容找其对应的位置 "haidilao ge" in a 增加 a.app ...

  8. CSS3制作分步注册表单

    这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...

  9. ajax实现聊天室功能

    需求如下: 先死后活. 需求分析,分析思路如图所示: 1.创建数据库 create database chat; create table messages( id int unsigned prim ...

  10. SpringMVC 文件上传及下载

    首先需要导入jar包 创建一个jsp页面 package cn.happy.Controller; import java.io.File; import javax.servlet.http.Htt ...