在了解js原型链之前构造函数、原型对象、对象实例这几种概念必须要明白。

1. 创建对象有几种方法

//原型链指向object
var o1={name:'o1'};
var o11=new Object({name:'o11'});//通过new来声明对象
var M=function(){this.name='o2'} //使用显示的构造函数创建对象
var o2=new M();
var P={name:'o3'};
var o3=Object.create(P)

每个对象都有一个__proto__属性,指向这个对象的构造函数的原型对象。

2. 构造函数和普通函数的区别

(1)构造函数内部会创建一个新的对象实例;函数内部this指向新创建的实例;默认的返回值是f的实例。

(2)在调用函数的内部不会创建新的对象;this指向函数调用的对象,如果没有对象调用,默认是window;返回值由return语句决定。

3. 原型对象

在声明一个函数的时候就会有prototype属性,就是原型对象,原型对象内部包含一个constructor属性,指向构造函数本身。

4. 构造函数、原型和实例的关系

每个构造函数都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个指向原型对象的内部指针(__proto__)。

构造函数----prototype原型对象-----__proto__---原型对象。

5. 原型链

当调用某种方法或者查找某种属性时,首先会在自身查找和调用,如果自身没有该属性或方法时,则会去他的__proto__属性中去查找,也就是去他的构造函数的原型对象中去查找。

如果我们让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,此关系层层递进,构成实例与原型的链条。例子:

function Type(){
this.proporty = true;
} Type.proptotype.getValue = function(){
return this.proporty;
}

function SubType(){
this.subproporty = false;
} // 继承了Type
SubType.prototype = new Type(); SubType.prototype.getSubValue = function(){
return this.subproporty;
} var result = new SubType();
alert(result.getValue()) // true

以上代码分别定义两个类型,每个类型分别有一个属性和方法。它们的主要区别是subType继承了Type,而继承是通过创建Type的实例,并将改实例赋给subType.prototype实现的。实现的本质是重写原型对象,代之以一个新的类型的实例。

也就是原来存在于Type实例中所有的属性和方法都被SubType继承。

最终,result指向subType的原型,而SubType的原型又指向Type的原型。

6. 继承

原型链是实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

最后,两个相等

function Fn(){}

var f = new Fn()

实例的隐式原型(__proto__)指向它的构造函数的显示原型(prototype)即 f.__proto__=== Fn.prototype // true

构造函数的原型里有一个constructor属性指向构造函数本身 即 Fn.prototype.constructor === Fn //true

js原型链和继承的更多相关文章

  1. js原型链与继承(初体验)

    js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...

  2. 深入理解JS原型链与继承

    我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...

  3. JS原型链与继承别再被问倒了

    原文:详解JS原型链与继承 摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实 ...

  4. js 原型链和继承(转)

    在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...

  5. 小谈js原型链和继承

    原型(prototype)在js中可是担当着举足轻重的作用,原型的实现则是在原型链的基础上,理解原型链的原理后,对原型的使用会更加自如,也能体会到js语言的魅力. 本文章会涉及的内容 原型及原型对象 ...

  6. 【转】js原型链与继承

    原文链接:https://blog.csdn.net/u012468376/article/details/53127929 一.继承的概念 ​ 继承是所有的面向对象的语言最重要的特征之一.大部分的o ...

  7. js 原型链与继承

    var A = function(){ this.name="xiaoming"; } A.prototype.age=9; var a = new A(); console.lo ...

  8. js原型链、继承、this指向等老生常谈却依然不熟的知识点——记录解析

    开始记录学习过程—— 很详细的解析过程——https://juejin.im/post/5c72a1766fb9a049ea3993e6 借鉴阅读——https://github.com/KieSun ...

  9. js原型链+继承 浅析

    名称:    prototype--原型对象    __proto__--属性 原型链与继承网上搜索定义,看起来挺绕的 .先说继承: 所有的对象实例都可以共享原型对象包含的属性和方法  例如一个实例A ...

随机推荐

  1. laravel 数据库查询的一些函数意义(未完)

    ->all() 查询数据库中的全部信息,一对象形式返回 $rows=UserModel::all(); ->get() 查询的执行函数,->toArray()将查询的是数据集转换成数 ...

  2. atitit.新增编辑功能 跟orm的实现 attilax p31

    atitit.新增编辑功能 跟orm的实现 attilax p31 1. 流程的实现 1 2. view的实现(dwr) 1 3. 获取表结构 1 4. grep filt req params 2 ...

  3. JAVA多线程之Synchronized、wait、notify实例讲解

    一.Synchronized synchronized中文解释是同步,那么什么是同步呢,解释就是程序中用于控制不同线程间操作发生相对顺序的机制,通俗来讲就是2点,第一要有多线程,第二当多个线程同时竞争 ...

  4. Nmap速查手册

    http://drops.wooyun.org/tips/4333 From:http://highon.coffee/docs/nmap/ 0x00:说明 只是一个快速查询手册,理论的东西都没有补充 ...

  5. word字号

    1 大特号 63 2 特 号 54 3 初 号 42 4 小初号 36 5 大一号 31.5 6 一 号 28 7 小一号 24 8 二 号 21 9 小二号 18 10 三 号 16 11 小三号  ...

  6. C#使用SendMessage传递字符串

    来源:http://www.cnblogs.com/sizzle/archive/2007/08/29/874796.html 正文: 在C#中使用SendMessage,原本以为很简单的事,却处处碰 ...

  7. PHP——数组2(数组函数,二维数组,正则表达式)

    <body> <?php //数组函数 $arr=array(1,2,3,4,5,6); print_r($arr); echo "<br />"; ...

  8. per-cpu

    What is percpu data? percpu data 是内核为smp系统中不同CPU之间的数据保护方式,系统为每个CPU维护一段私有的空间,在这段空间中的数据只有这个CPU能访问.但是这种 ...

  9. Redis常用命令解析——INFO, MONITOR, SLOWLOG

    1. INFO info指令返回服务器相关信息,包括: server: General information about the Redis server clients: Client conne ...

  10. 一条经典SQL语句优化实例

    1.概述 如下SQL语句发生严重消耗资源的问题,使得OS's load average会在30以上,一条语句需要执行上百秒. /*PIXPatient 184176条DomainPatient 184 ...