在了解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. 父级和 子集 controller 之间的通讯

    在同个 angular.js 应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式 基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通 ...

  2. REPEAT_BYTE(x)宏

    位置:include/linux/kernel.h 定义: #define REPEAT_BYTE(x) ((~0ul / 0xff)*(x)) 作用:结果看下面,作用未知,好像是为了一个叫:word ...

  3. php图片采集后按原路径保存图片

    php图片采集后按原路径保存图片. 代码: <?php $domain ='http://www.jbxue.com'; $url = '/newskin/images/v4/logo.jpg' ...

  4. Java字节码指令

    1. 简介 Java虚拟机的指令由一个字节长度的.代表着某种特定操作含义的数字(称为操作码)以及跟随其后的零至多个代表此操作所需参数(称为操作数)而构成. 由于Java虚拟机采用面向操作数栈而不是寄存 ...

  5. 三、请求库之requests模块

    一 介绍   #介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模块的api更加便捷(本质就是封装了urllib3) #注意:requests库发送请求将网 ...

  6. MySQL编程API

    1.MySQL API数据结构 MySQL API中用到了很多结构体类型,下面就简单说一下常用的结构体. MYSQL 连接数据库前,必须先创建MYSQL变量,此变量在很多MySQL API函数中会用到 ...

  7. jquery 排除重复

    应用场景——双盒选择器 两个select可能会出现重复的情况 排除重复代码如下: /** * 删除$fromGroup中与$toGroup重复的option * @param $fromGroup = ...

  8. js监听文本框变化事件

    用js有两种写法: 法一: <!DOCTYPE HTMl> <html> <head> <title> new document </title& ...

  9. Scala类中的get与set

    在scala类中get和set使用有以下几种: 1. var foo: Scala自动合成一个getter和一个setter 2. val foo: Scala自动合成一个getter scala中v ...

  10. C++ operator关键字

    operator是C++的关键字,它和运算符一起使用,表示一个运算符函数,理解时应将operator=整体上视为一个函数名. 这是C++扩展运算符功能的方法,虽然样子古怪,但也可以理解:一方面要使运算 ...