在了解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. Spring IOC和AOP 基础

    1 spring中注入资源是通过描述来实现的,在 spring 中是通过注解或者 XML 描述.spring 中IOC 注入方式有三种 1)构造方法注入 2)setter 注入 3)接口注入 1.1) ...

  2. unity5,UI Button too small on device than in Game View解决办法

    假设测试设备为iphone5(横屏).下面说明如何使真机上ui显示效果与Game View中一致. 1,首先Game View左上角屏幕规格选 iPhone 5 Wide (16:9),如图: 2,在 ...

  3. [Jobdu] 题目1384:二维数组中的查找

    题目描述: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 输入: 输入可能包含 ...

  4. 使用Secure Boot后,导致VMware无法启动虚拟机

    最初安装vmware时就报错  Gtk-Message: Failed to load module "canberra-gtk-module": libcanberra-gtk- ...

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

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

  6. windows 和 linux 安装 scrapyd 出现Not a directory site-packages/scrapyd-1.0.1-py2.7.egg/scrapyd/txapp.py

    1  这是因为 scrapyd安装的时候没有 解压 对应的 egg而导致的文件找不到的错误. 2 解决的方法,找到 scrapyd-1.0.1-py2.7.egg 解压缩 里面 有一个  scrapy ...

  7. swift 属性和方法

    属性和常量 如果创建了一个结构体的实例并赋值给一个常量,则无法修改实例的任何属性: let rangeOfFourItems = FixedLengthRange(firstValue: 0, len ...

  8. 0072 Java中的泛型--泛型是什么--泛型类--泛型方法--擦除--桥方法

    什么是泛型,有什么用? 先运行下面的代码: public class Test { public static void main(String[] args) { Comparable c=new ...

  9. shell学习笔记之控制结构(三)

    1.if语句 if condition then statements esle statements fi 例: #!/bin/sh echo "Is it morning? Please ...

  10. spring cloud outh2

    使用Spring Cloud Security OAuth2搭建授权服务http://www.blogjava.net/paulwong/archive/2016/09/16/431797.html? ...