首页 / JAVASCRIPT / 再谈javascript原型继承

再谈javascript原型继承

内容导读

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

内容图文

真正意义上来说Javascript并不是一门面向对象的语言，没有提供传统的继承方式，但是它提供了一种原型继承的方式，利用自身提供的原型属性来实现继承。

原型与原型链

说原型继承之前还是要先说说原型和原型链，毕竟这是实现原型继承的基础。
在Javascript中，每个函数都有一个原型属性prototype指向自身的原型，而由这个函数创建的对象也有一个__proto__属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个__proto__指向自己的原型，这样逐层深入直到Object对象的原型，这样就形成了原型链。下面这张图很好的解释了Javascript中的原型和原型链的关系。

再谈javascript原型继承 - 文章图片

每个函数都是Function函数创建的对象，所以每个函数也有一个__proto__属性指向Function函数的原型。这里需要指出的是，真正形成原型链的是每个对象的__proto__属性，而不是函数的prototype属性，这是很重要的。

原型继承

基本模式

代码如下:
var Parent = function(){
this.name = 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;

var Child = function(){
this.name = 'child' ;
} ;
Child.prototype = new Parent() ;

var parent = new Parent() ;
var child = new Child() ;

console.log(parent.getName()) ; //parent
console.log(child.getName()) ; //child

这种是最简单实现原型继承的方法，直接把父类的对象赋值给子类构造函数的原型，这样子类的对象就可以访问到父类以及父类构造函数的prototype中的属性。这种方法的原型继承图如下：

再谈javascript原型继承 - 文章图片

这种方法的优点很明显，实现十分简单，不需要任何特殊的操作；同时缺点也很明显，如果子类需要做跟父类构造函数中相同的初始化动作，那么就得在子类构造函数中再重复一遍父类中的操作：

代码如下:
var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;

var Child = function(name){
this.name = name || 'child' ;
} ;
Child.prototype = new Parent() ;

var parent = new Parent('myParent') ;
var child = new Child('myChild') ;

console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

上面这种情况还只是需要初始化name属性，如果初始化工作不断增加，这种方式是很不方便的。因此就有了下面一种改进的方式。

借用构造函数

代码如下:
var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;

var Child = function(name){
Parent.apply(this,arguments) ;
} ;
Child.prototype = new Parent() ;

var parent = new Parent('myParent') ;
var child = new Child('myChild') ;

console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

上面这种方法在子类构造函数中通过apply调用父类的构造函数来进行相同的初始化工作，这样不管父类中做了多少初始化工作，子类也可以执行同样的初始化工作。但是上面这种实现还存在一个问题，父类构造函数被执行了两次，一次是在子类构造函数中，一次在赋值子类原型时，这是很多余的，所以我们还需要做一个改进：

代码如下:
var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;

var Child = function(name){
Parent.apply(this,arguments) ;
} ;
Child.prototype = Parent.prototype ;

var parent = new Parent('myParent') ;
var child = new Child('myChild') ;

console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

这样我们就只需要在子类构造函数中执行一次父类的构造函数，同时又可以继承父类原型中的属性，这也比较符合原型的初衷，就是把需要复用的内容放在原型中，我们也只是继承了原型中可复用的内容。上面这种方式的原型图如下：

再谈javascript原型继承 - 文章图片

临时构造函数模式(圣杯模式)

上面借用构造函数模式最后改进的版本还是存在问题，它把父类的原型直接赋值给子类的原型，这就会造成一个问题，就是如果对子类的原型做了修改，那么这个修改同时也会影响到父类的原型，进而影响父类对象，这个肯定不是大家所希望看到的。为了解决这个问题就有了临时构造函数模式。

代码如下:
var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;

var Child = function(name){
Parent.apply(this,arguments) ;
} ;
var F = new Function(){} ;
F.prototype = Parent.prototype ;
Child.prototype = new F() ;

var parent = new Parent('myParent') ;
var child = new Child('myChild') ;

console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

该方法的原型继承图如下：

再谈javascript原型继承 - 文章图片

很容易可以看出，通过在父类原型和子类原型之间加入一个临时的构造函数F，切断了子类原型和父类原型之间的联系，这样当子类原型做修改时就不会影响到父类原型。

我的方法

《Javascript模式》中到圣杯模式就结束了，可是不管上面哪一种方法都有一个不容易被发现的问题。大家可以看到我在'Parent'的prototype属性中加入了一个obj对象字面量属性，但是一直都没有用。我们在圣杯模式的基础上来看看下面这种情况：

代码如下:
var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;

var Child = function(name){
Parent.apply(this,arguments) ;
} ;
var F = new Function(){} ;
F.prototype = Parent.prototype ;
Child.prototype = new F() ;

var parent = new Parent('myParent') ;
var child = new Child('myChild') ;

console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = 2 ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //2

在上面这种情况中，当我修改child对象obj.a的时候，同时父类的原型中的obj.a也会被修改，这就发生了和共享原型同样的问题。出现这个情况是因为当访问child.obj.a的时候，我们会沿着原型链一直找到父类的prototype中，然后找到了obj属性，然后对obj.a进行修改。再看看下面这种情况：

代码如下:
var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;

var Child = function(name){
Parent.apply(this,arguments) ;
} ;
var F = new Function(){} ;
F.prototype = Parent.prototype ;
Child.prototype = new F() ;

var parent = new Parent('myParent') ;
var child = new Child('myChild') ;

console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = 2 ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //2

这里有一个关键的问题，当对象访问原型中的属性时，原型中的属性对于对象来说是只读的，也就是说child对象可以读取obj对象，但是无法修改原型中obj对象引用，所以当child修改obj的时候并不会对原型中的obj产生影响，它只是在自身对象添加了一个obj属性，覆盖了父类原型中的obj属性。而当child对象修改obj.a时，它先读取了原型中obj的引用，这时候child.obj和Parent.prototype.obj是指向同一个对象的，所以child对obj.a的修改会影响到Parent.prototype.obj.a的值，进而影响父类的对象。AngularJS中关于$scope嵌套的继承方式就是模范Javasript中的原型继承来实现的。
根据上面的描述，只要子类对象中访问到的原型跟父类原型是同一个对象，那么就会出现上面这种情况，所以我们可以对父类原型进行拷贝然后再赋值给子类原型，这样当子类修改原型中的属性时就只是修改父类原型的一个拷贝，并不会影响到父类原型。具体实现如下：

代码如下:
var deepClone = function(source,target){
    source = source || {} ;
    var toStr = Object.prototype.toString ,
        arrStr = '[object array]' ;
    for(var i in source){
        if(source.hasOwnProperty(i)){
            var item = source[i] ;
            if(typeof item === 'object'){
                target[i] = (toStr.apply(item).toLowerCase() === arrStr) : [] ? {} ;
                deepClone(item,target[i]) ;
            }else{
                deepClone(item,target[i]) ;
            }
        }
    }
    return target ;
} ;
var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : '1'} ;

var Child = function(name){
Parent.apply(this,arguments) ;
} ;
Child.prototype = deepClone(Parent.prototype) ;

var child = new Child('child') ;
var parent = new Parent('parent') ;

console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = '2' ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //1

综合上面所有的考虑，Javascript继承的具体实现如下，这里只考虑了Child和Parent都是函数的情况下：

总结

说了这么多，其实Javascript中实现继承是十分灵活多样的，并没有一种最好的方法，需要根据不同的需求实现不同方式的继承，最重要的是要理解Javascript中实现继承的原理，也就是原型和原型链的问题，只要理解了这些，自己实现继承就可以游刃有余。

内容总结

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

内容备注

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

内容手机端

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

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

来源：【匿名】

【上一篇】javascript继承机制实例详解【下一篇】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 - 最热教程