在了解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. ubuntu下载linux内核源码

    ubuntu仓库里面关于源码部分配置的好全啊,什么都有,ps:包括vim的各种插件居然也有人打包放到仓库里,真是方便. 1.首先查看一下本系统使用的内核版本号: cat /proc/version L ...

  2. 实现编程时Vim自动导入相应模板

    Vim文本编辑器以简洁高效著称,那么我们在编程时能有自动加载相应的模板,从而省去一些固定的输入提升工作效率呢!当然可以,可以有多种方法实现,我这里介绍一种非常简单的方法. 首先在你的主用户文件下面建立 ...

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

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

  4. Decoration7:注册登录设计

    首先顶一个小目标:从前台写入用户数据后,登录的时候输入用户名和密码,能够查询数据库成功,同时记录session数据 1.Login界面,为了只关注主线任务,我直接套用一个bootstrap模板admi ...

  5. JS 利用正则表达式替换字符串

    JS 利用正则表达式替换字符串 博客分类: JavaScript 学习资料 Java代码 收藏代码 JS 利用正则表达式替换字符串 var data = "123123,213,12312, ...

  6. iPhone应用程序的启动过程

    Phone的入口函数main,这之后它有是怎样启动应用程序,初始化的呢,这些都是通过 UIApplicationMain 来实现的. 其启动的流程图大致如下图所示: 1 int retVal = UI ...

  7. 一定要使用-server参数来调试并发程序

    在阅读JCIP的时候想手工测试一下,结果发现总是没有出现书中描述的并发问题 后来我琢磨,以前记得书上说过,在debugging的环境下,JVM是低并发的,一定要在server的环境下测试,让JVM在高 ...

  8. 从constructor中抛出exception后,constructor会返回null吗?

    刚才琢磨这个问题主要是在想,如果constructor抛出了exception,那么返回的object是什么一个情况呢?如果我这个object中有一些关键的资源没有初始化,比如说Database co ...

  9. windows7环境下使用pip安装MySQLdb

    1.首先,需要确定你已经安装了pip.在Python2.7的安装包中,easy_install.py和pip都是默认安装的.可以在Python的安装目录先确认,如果\Python27\Scripts里 ...

  10. c#开源项目[转]

    一.AOP框架 Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了把方面(aspects)部署到运行时代码,而其它AOP框架依赖配置文件的方式.这种部署方面(as ...