在了解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. memcached+Mysql(主从)

    昨天和守住看了下http://hi.baidu.com/156544632/blog/item/3b26527b68623ff00bd18746.html这篇文章,思路很好,但感觉就是太乱了,而且还出 ...

  2. atitit. 文件上传带进度条 atiUP 设计 java c# php

    atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...

  3. 响应式布局框架 Pure-CSS 5.0 示例中文版-上

    0. Pure-CSS 介绍 Pure CSS 是雅虎出品的 CSS 框架, 依托于Normalize.CSS,在不适用任何JS代码情况下即可实现响应式布局的轻量级框架,无依赖,体积小. 1. CDN ...

  4. Windows Phone 推送通知的第四类推送

    在 MSDN 文档有关 Windows Phone 推送通知 有关推送的内容包含 Tile.Toast.Raw 这三种通知.这三种通知 的方式类似,运用的场合不同,这里不再赘述,它们的运行原理类似: ...

  5. 模拟元素的title属性,自定义Vue指令

    function showTitle(el, title) { const popover = getPopover() const popoverStyle = popover.style if ( ...

  6. oracle 表空间 数据文件 表的关系

    数据文件是表空间的容器,增加数据文件是增大表空间的容量,而不是往表空间里添加数据因此数据文件肯定能添加,如果表空间用完了,再添加新的数据就会报错你可以这样理解,数据库是一个箱子,表空间是箱子里的抽屉, ...

  7. 知乎日报 API 分析

    声明 下面全部 API 均由 知乎(Zhihu.Inc) 提供,本人採取非正常手段获取. 获取与共享之行为或有侵犯知乎权益的嫌疑.若被告知需停止共享与使用.本人会及时删除此页面与整个项目. 请您暸解相 ...

  8. PS中进程状态

    PROCESS STATE CODES       Here are the different values that the s, stat and state output       spec ...

  9. Hive及HBase数据迁移

    一. Hive数据迁移 场景:两个Hadoop平台集群之间Hive表迁移. 基本思路:Hive表元数据和文件数据export到HDFS文件,通过Distcp将HDFS迁移到另一个集群的HDFS文件,再 ...

  10. gin入门

    Download and install it: $ go get github.com/gin-gonic/gin Import it in your code: import "gith ...