首页 / JAVASCRIPT / JavaScript原型和继承

JavaScript原型和继承

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript原型和继承，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5746字，纯文字阅读大概需要9分钟。

内容图文

一、函数创建过程

在了解原型链之前我们先来看看一个函数在创建过程中做了哪些事情，举一个空函数的例子：

1 function A() {};

当我们在代码里面声明这么一个空函数，js解析的本质是（肤浅理解有待深入）：

1、创建一个对象（有constructor属性及[[Prototype]]属性），根据ECMA，其中[[Prototype]]属性不可见、不可枚举

2、创建一个函数（有name、prototype属性），再通过prototype属性引用刚才创建的对象

3、创建变量A，同时把函数的引用赋值给变量A

如下图所示：

JavaScript原型和继承 - 文章图片

（注意图中都是“ 引用 ”类型）

每个函数的创建都经历上述过程。

二、构造函数
那么什么是构造函数呢？
按照ECMA的定义
Constructor is a function that creates and initializes the newly created object.
构造函数是用来新建同时初始化一个新对象的函数。
什么样的函数可以用来创建同时初始化新对象呢？答案是：任何一个函数，包括空函数。
所以，结论是：任何一个函数都可以是构造函数。

三、原型
根据前面空函数的创建图示，我们知道每个函数在创建的时候都自动添加了prototype属性，这就是函数的原型，从图中可知其实质就是对一个对象的引用（这个对象暂且取名原型对象）。
我们可以对函数的原型对象进行操作，和普通的对象无异！一起来证实一下。
围绕刚才创建的空函数，这次给空函数增加一些代码：
function A() {
this.width = 10;
this.data = [1,2,3];
this.key = "this is A";
}
A._objectNum = 0;//定义A的属性
A.prototype.say = function(){//给A的原型对象添加属性
alert("hello world")
}
第7~9行代码就是给函数的原型对象增加一个say属性并引用一个匿名函数，根据“函数创建”过程，图解如下：

JavaScript原型和继承 - 文章图片

（灰色背景就是在空函数基础上增加的属性）
简单说原型就是函数的一个属性，在函数的创建过程中由js编译器自动添加。
那么原型有什么用呢？
先了解下new运算符，如下：
1
2 var a1 = new A;
var a2 = new A;
这是通过构造函数来创建对象的方式，那么创建对象为什么要这样创建而不是直接var a1 = {};呢？这就涉及new的具体步骤了，这里的new操作可以分成三步(以a1的创建为例)：
1、新建一个对象并赋值给变量a1：var a1 = {};
2、把这个对象的[[Prototype]]属性指向函数A的原型对象：a1.[[Prototype]] = A.prototype
3、调用函数A，同时把this指向1中创建的对象a1，对对象进行初始化：A.apply(a1,arguments)
其结构图示如下：

JavaScript原型和继承 - 文章图片

从图中看到，无论是对象a1还是a2，都有一个属性保存了对函数A的原型对象的引用，对于这些对象来说，一些公用的方法可以在函数的原型中找到，节省了内存空间。

四、原型链
了解了new运算符以及原型的作用之后，一起来看看什么是[[Prototype]]？以及对象如何沿着这个引用来进行属性的查找？
在js的世界里，每个对象默认都有一个[[Prototype]]属性，其保存着的地址就构成了对象的原型链，它是由js编译器在对象被创建的时候自动添加的，其取值由new运算符的右侧参数决定：当我们var object1 = {};的时候，object1的[[Prototype]]就指向Object构造函数的原型对象，因为var object1 = {};实质上等于var object = new Object();（原因可参照上述对new A的分析过程）。
对象在查找某个属性的时候，会首先遍历自身的属性，如果没有则会继续查找[[Prototype]]引用的对象，如果再没有则继续查找[[Prototype]].[[Prototype]]引用的对象，依次类推，直到[[Prototype]].….[[Prototype]]为undefined（Object的[[Prototype]]就是undefined）
如上图所示：
//我们想要获取a1.fGetName
alert(a1.fGetName);//输出undefined
//1、遍历a1对象本身 www.2cto.com
//结果a1对象本身没有fGetName属性
//2、找到a1的[[Prototype]]，也就是其对应的对象A.prototype，同时进行遍历
//结果A.prototype也没有这个属性
//3、找到A.prototype对象的[[Prototype]]，指向其对应的对象Object.prototype
//结果Object.prototype也没有fGetName
//4、试图寻找Object.prototype的[[Prototype]]属性，结果返回undefined，这就是a1.fGetName的值
简单说就是通过对象的[[Prototype]]保存对另一个对象的引用，通过这个引用往上进行属性的查找，这就是原型链。

五、继承
有了原型链的概念，就可以进行继承。
1 function B() {};
这个时候产生了B的原型B.prototype
原型本身就是一个Object对象，我们可以看看里面放着哪些数据
B.prototype 实际上就是 {constructor : B , [[Prototype]] : Object.prototype}
因为prototype本身是一个Object对象的实例，所以其原型链指向的是Object的原型
B.prototype = A.prototype;//相当于把B的prototype指向了A的prototype；这样只是继承了A的prototype方法，A中的自定义方法则不继承
B.prototype.thisisb = "this is constructor B";//这样也会改变a的prototype
但是我们只想把B的原型链指向A，如何实现？
第一种是通过改变原型链引用地址
1 B.prototype.__proto__ = A.prototype;
ECMA中并没有__proto__这个方法，这个是ff、chrome等js解释器添加的，等同于EMCA的[[Prototype]]，这不是标准方法，那么如何运用标准方法呢？
我们知道new操作的时候，实际上只是把实例对象的原型链指向了构造函数的prototype地址块，那么我们可以这样操作
1 B.prototype = new A();
这样产生的结果是：
产生一个A的实例，同时赋值给B的原型，也即B.prototype 相当于对象 {width :10 , data : [1,2,3] , key : "this is A" , [[Prototype]] : A.prototype}
这样就把A的原型通过B.prototype.[[Prototype]]这个对象属性保存起来，构成了原型的链接
但是注意，这样B产生的对象的构造函数发生了改变，因为在B中没有constructor属性，只能从原型链找到A.prototype，读出constructor:A
var b = new B;
console.log(b.constructor);//output A
所以我们还要人为设回B本身
B.prototype.constructor = B;
//现在B的原型就变成了{width :10 , data : [1,2,3] , key : "this is A" , [[Prototype]] : A.prototype , constructor : B}
console.log(b.constructor);//output B
//同时B直接通过原型继承了A的自定义属性width和name
console.log(b.data);//output [1,2,3]
//这样的坏处就是
b.data.push(4);//直接改变了prototype的data数组（引用）
var c = new B;
alert(c.data);//output [1,2,3,4]
//其实我们想要的只是原型链，A的自定义属性我们想在B中进行定义（而不是在prototype）
//该如何进行继承？
//既然我们不想要A中自定义的属性，那么可以想办法把其过滤掉
//可以新建一个空函数
function F(){}
//把空函数的原型指向构造函数A的原型
F.prototype = A.prototype;
//这个时候再通过new操作把B.prototype的原型链指向F的原型
B.prototype = new F;
//这个时候B的原型变成了{[[Prototype]] : F.prototype}
//这里F.prototype其实只是一个地址的引用
//但是由B创建的实例其constructor指向了A，所以这里要显示设置一下B.prototype的constructor属性
B.prototype.constructor = B;
//这个时候B的原型变成了{constructor : B , [[Prototype]] : F.prototype}
//这样就实现了B对A的原型继承
图示如下，其中红色部分代表原型链：

JavaScript原型和继承 - 文章图片

内容总结

以上是互联网集市为您收集整理的JavaScript原型和继承全部内容，希望文章能够帮你解决JavaScript原型和继承所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/304595.html

来源：【匿名】

【上一篇】JavaScript模拟系统弹出框，顺便操作dom练练手【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript原型和继承】教程文章相关的互联网学习教程文章

javascript继承【代码】【图】

JavsScript中对象继承关系变得无关紧要，对于一个对象来说重要的是它能做什么，而不是它从哪里来。JavaScript提供了一套更为丰富的代码重用模式。它可以模拟那些基于类的模式，同时它也可以支持其他更具表现力的模式。JavaScript是一门基于原型的语言，这意味着对象直接从其他对象继承。一、伪类1、原理javascript原型机制：不直接让对象从其他对象继承，反而插入了一个多余的间接层：通过构造器函数产生对象。当一个函数对象被创建...

JavaScript继承的实现【代码】【图】

JavaScript继承有构造函数继承、原型继承、复制继承、构造函数/原型组合继承等方法，这些继承方法各有特点。眼下最经常使用的就是构造函数/原型组合继承。/*** 实现继承* @param subType {Function} 子类构造函数* @param superType {Function} 父类构造函数*/functioninherit(subType, superType){functionF(){}F.prototype = superType.prototype;var p = new F();p.constructor = subType;subType.prototype = p; }/***...

JavaScript如何实现继承【代码】【图】

// 原型方式的‘继承‘ function Person(name) { //定义一个Person的构造函数 this.name = name; //添加属性 } Person.prototype.showName=function () { //添加方法 return this.name; }; function Worker(name,job) { Person.apply(this,arguments); //属性的‘继承‘ this.job=job; } Worker.prototype=new Person(); //方法的‘继承‘ Worker.prototype.showJob=function () { return this.job; }; var p1=new Person(‘abc‘)...

JavaScript中的继承之借用构造函数【代码】

借用构造函数是为了解决引用值类型被所有实例共享的问题。基本思想是：在子类型构造函数内部通过apply()或call()方法调用超类型的构造函数，也可以在将来新创建的对象上执行构造函数。先看一个例子：function superType(){this.colors = [‘red‘,‘blue‘,‘green‘]; }function subType(){//继承了superTypesuperType.call(this); }var instance1 = new subType(); instance1.colors.push(‘black‘); alert(instance1....

javascript实现继承的一种方式【代码】

function extend(Child, Parent) {var F = function(){};F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child;Child.uber = Parent.prototype;} 使用的时候，方法如下extend(Cat,Animal);var cat1 = new Cat("大毛","黄色");alert(cat1.species); // 动物这个extend函数，就是YUI库如何实现继承的方法。原文：http://www.cnblogs.com/hubing/p/4528496.html

一文看懂JS继承【图】

继承是OOP中大家最喜欢谈论的内容之一，一般来说，继承都两种方式：接口继承和实现继承而JavaScript中没有接口继承需要的方法，因此只能依靠实现继承。在讲继承的实现之前，我们首先来回顾一下什么是继承？继承的作用是什么？它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。通过继承创建的新类称为“子类”或“派生类”。被继承的类称为“基类”、“父类”或“超类”。在清楚继承的作用之后，下...

javascript中创建对象和实现继承

# oo ##创建对象 1. 原型、构造函数、实例之间的关系 * 原型的construct->构造函数；调用isPrototypeOf(obj)方法可以判定和实例的关系； * 构造函数的prototype->原型； * 实例的__proto__ ->原型（仅在chrome,safari,Firefox中存在，而共有的是[[prototype]]）；用getPrototypeOf()方法可以返回[[prototype]]的值； * 构造函数后构造函数的‘子类’new产生一个实例，可以用instanceOf 操作符来检测构造函数是否出现在原型链上...

javascript 继承机制设计思想

作者：阮一峰原文链接：http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html我一直很难理解Javascript语言的继承机制。它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无法从根本上理解。直到昨天，我读到法国...

javascript——继承

内容： 1.继承的概念、继承分为那几种继承及各种继承的区别 2.js中有那几种继承方式及各种继承的优缺点 3.总结原文：http://www.cnblogs.com/xiaowuzi/p/3715505.html

javascript 通过原型继承创建一个新对象

function inherit(p) { 　　if(p == null) throw TypeError(); //p 是一个对象, 但不能是null 　　if(Object.create) 　　　　　　　　　　　　　　　　　　//如果Object.create()存在　　return Object.create(p);　　　　　　　　　　　　　　　　　　　　 //直接使用它　　　　var t = typeof p;　　　　　　　　　　　　　　　　　　　　　　　　//否则进...

Javascript中的原型继承详解【代码】【图】

js中的继承，是面向对象的知识，因为js没有类的概念，所以继承是通过对象实现的，谈到继承，就必须说到prototype，就不得不先说下new的过程。一个小小的列子：<scripttype="text/javascript">var Person = function() { };var p = new Person();</script>我们来看看这个new究竟做了什么？我们可以把new的过程拆分成以下三步：<1> var p={}; 也就是说，初始化一个对象p。<2> p.proto=Person.prototype;<3> Person.call(p);也就是说...

JavaScript继承详解（三）【代码】

在第一章中，我们使用构造函数和原型的方式在JavaScript的世界中实现了类和继承，但是存在很多问题。这一章我们将会逐一分析这些问题，并给出解决方案。注：本章中的jClass的实现参考了Simple JavaScript Inheritance的做法。首先让我们来回顾一下第一章中介绍的例子： function Person(name) {this.name = name;}Person.prototype = { getName: function() { return this.name; }} function Employee(name, employeeID) {this....

js的封装、继承与多态【代码】

<!DOCTYPE html><html><head><meta charset="utf-8"><title>test</title></head><body><script>window.onload =function() {// 封装var Book =function(id, name, price) {// 私有变量(在函数内部定义，函数外部访问不到，实例化之后实例化的对象访问不到)var num =1var id = idfunction privateFunction() {console.log(‘this is private‘)}// protected(可以访问到函数内部的私有属性和私有方法，在实例化之后就可以对实例化的...

JajavaScript——原型继承四步曲

javascript中实现继承的几种方式【代码】

javascript中实现继承的几种方式1、借用构造函数实现继承function Parent1(){this.name = "parent1" } function Child1(){Parent1.call(this);this.type = "child1"; }缺点：Child1无法继承Parent1的原型对象，并没有真正的实现继承（部分继承）2、借用原型链实现继承function Parent2(){this.name = "parent2";this.play = [1,2,3]; } function Child2(){this.type = "child2"; } Child2.prototype = new Parent2();缺点：原型对象...

首页 / JAVASCRIPT / JavaScript原型和继承

JavaScript原型和继承

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript原型和继承】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程