JavaScript实现继承的4种方法总结

JavaScript虽没有给出继承的关键字,但是我们依然能够拿出一些好办法实现。

1、原型链继承:

代码如下:

var Base = function() 

    this.level = 1; 
    this.name = "base"; 
    this.toString = function(){ 
        return "base"; 
    }; 
}; 
Base.CONSTANT = "constant"; 
  
var Sub = function() 

}; 
Sub.prototype = new Base(); 
Sub.prototype.name = "sub";

优点:从instanceof关键字来看,实例既是父类的实例,又是子类的实例,看起来似乎是最纯粹的继承。

缺点:子类区别于父类的属性和方法,必须在Sub.prototype = new Base();这样的语句之后分别执行,无法被包装到Sub这个构造器里面去。例如:Sub.prototype.name = “sub”;无法实现多重继承。

2、构造继承:

代码如下:

var Base = function() 

    this.level = 1; 
    this.name = "base"; 
    this.toString = function(){ 
        return "base"; 
    }; 
}; 
Base.CONSTANT = "constant"; 
  
var Sub = function() 

    Base.call(this); 
    this.name = "sub"; 
};

优点:可以实现多重继承,可以把子类特有的属性设置放在构造器内部。

缺点:使用instanceof发现,对象不是父类的实例。

3、实例继承:

代码如下:

var Base = function() 

    this.level = 1; 
    this.name = "base"; 
    this.toString = function(){ 
        return "base"; 
    }; 
}; 
Base.CONSTANT = "constant"; 
  
var Sub = function() 

    var instance = new Base(); 
    instance.name = "sub"; 
    return instance; 
};

优点:是父类的对象,并且使用new构造对象和不使用new构造对象,都可以获得相同的效果。

缺点:生成的对象实质仅仅是父类的实例,并非子类的对象;不支持多继承。

4、拷贝继承:

代码如下:

var Base = function() 

    this.level = 1; 
    this.name = "base"; 
    this.toString = function(){ 
        return "base"; 
    }; 
}; 
Base.CONSTANT = "constant"; 
  
var Sub = function() 

    var base = new Base(); 
    for(var i in base) 
        Sub.prototype[i] = base[i]; 
    Sub.prototype["name"] = "sub"; 
};

优点:支持多继承。

缺点:效率较低;无法获取父类不可枚举的方法。

这几种形式各有特点,仅就我提供的代码而言,满足下面的表格:

2012-1-10:补充,如果我们不需要类继承,只需要对象继承,对于支持 ECMAScript 5 的浏览器来说,还可以用Object.create方法来实现:

代码如下:

var Base = function() 

    this.level = 1; 
    this.name = "base"; 
    this.toString = function(){ 
        return "base"; 
    }; 
}; 
Base.CONSTANT = "constant"; 
  
var sub = Object.create(new Base()); 
sub.name = "sub";

(0)

相关推荐

  • 深入理解javascript原型链和继承

    在上一篇文章中,介绍了原型的概念,了解到在javascript中构造函数.原型对象.实例三个好基友之间的关系:每一个构造函数都有一个"守护神"--原型对象,原型对象心里面也存着一个构造函数的"位置",两情相悦,而实例呢却又"暗恋"着原型对象,她也在心里留存了一个原型对象的位置. javascript本身不是面向对象的语言,而是基于对象的语言,对于习惯了其他OO语言的人来说,起初有些不适应,因为在这里没有"类"的概念,或者说&q

  • javascript 原型链维护和继承详解

    一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了. 其实啊,光靠这一个属性是无法完成javascript的继承. 我们在代码中使用的prototype完成继承在这里就不多说了.大家可以查一下资料. 另外一个看不见的prototype成员. 每一个实例都有有一条指向原型的prototype属性,这个属性是无法被访问到的,当然也就无法被修改了,因为这是维护javascript继承的基础. 复

  • javascript关于继承的用法汇总

    本文实例汇总了javascript关于继承的用法.分享给大家供大家参考.具体如下: 例子: 复制代码 代码如下: /** * 实现子类继承父类,但不会产生多余的属性和方法 * @returns {Function} */ define(function(){ return function(subType, superType){ var proto = new Object(superType.prototype); proto.constructor = subType; subType.p

  • javascript继承机制实例详解

    本文实例讲述了javascript继承机制.分享给大家供大家参考.具体分析如下: 初学javascript一般很难理解Javascript语言的继承机制它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解

  • 再谈javascript原型继承

    真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承. 原型与原型链 说原型继承之前还是要先说说原型和原型链,毕竟这是实现原型继承的基础. 在Javascript中,每个函数都有一个原型属性prototype指向自身的原型,而由这个函数创建的对象也有一个__proto__属性指向这个原型,而函数的原型是一个对象,所以这个对象也会有一个__proto__指向自己的原型,这样逐层深入直到Object对象的

  • JavaScript不使用prototype和new实现继承机制

    此方法并非笔者原创,笔者只是在前辈的基础上,加以总结,得出一种简洁实用的JavaScript继承方法. 传统的JavaScript继承基于prototype原型链,并且需要使用大量的new操作,代码不够简洁,可读性也不是很强,貌似还容易受到原型链污染. 笔者总结的继承方式,简洁明了,虽然不是最好的方式,但希望能给读者带来启发. 好了,废话不多说,直接看代码,注释详尽,一看就懂~~~ 复制代码 代码如下: /**   * Created by 杨元 on 14-11-11.   * 不使用prot

  • javascript使用prototype完成单继承

    1.使用prototype完成单继承. 复制代码 代码如下: //定义一个A类 function A(){ } //为A类动态调用属性color,与方法sayColor A.prototype.color = "blue"; A.prototype.sayColor = function(){ alert(this.color); }; //创建了一个B类 function B(){ } //让B继承自A B.prototype=new A(); //new出A的对象赋值给B的原型,B

  • javascript 面向对象封装与继承

    整理一下js面向对象中的封装和继承. 1.封装 js中封装有很多种实现方式,这里列出常用的几种. 1.1 原始模式生成对象 直接将我们的成员写入对象中,用函数返回. 缺点:很难看出是一个模式出来的实例. 代码: 复制代码 代码如下: function Stu(name, score) {             return {                 name: name,                 score: score             }         }    

  • javascript原型链继承用法实例分析

    本文实例分析了javascript原型链继承的用法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: function Shape(){   this.name = 'shape';   this.toString = function(){    return this.name;   }  }    function TwoDShape(){   this.name = '2D shape';  }  function Triangle(side,height){   this.n

  • JavaScript实现继承的4种方法总结

    JavaScript虽没有给出继承的关键字,但是我们依然能够拿出一些好办法实现. 1.原型链继承: 复制代码 代码如下: var Base = function()  {      this.level = 1;      this.name = "base";      this.toString = function(){          return "base";      };  };  Base.CONSTANT = "constant&qu

  • JavaScript继承的三种方法实例

    继承 1. 什么是继承 继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承. 继承也是为了数据共享,js中的继承也是为了实现数据共享 我们可以联想到原型,他的两个作用是: 原型作用之一:数据共享,节省内存空间 原型作用之二:为了实现继承 继承是一种关系:父类级别与类级别的关系 例子: 人类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学生类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学习行为 老师类别: 姓名, 性别, 年龄

  • 详述JavaScript实现继承的几种方式(推荐)

    ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的. 原型链 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的指针.如果:我们让原型对象A等于另一个类型B的实例,那么原型对象A就会有一个指针指向B的原型对象,相应的B的原型对象中保存着指向其构造函数的指针.假如B的原型对象又是另一个类型的实例,那么上述的关系依旧成立,如此层层递进,就构成了实例与原型的

  • 跟我学习javascript创建对象(类)的8种方法

    8中javascript创建对象(类)的方法,依依介绍给大家,希望大家喜欢. 1. 使用Object构造函数来创建一个对象 下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); person.name="kevin"; person.age=31; alert(person.name); alert(person["name"]) 上述写法的另外一种表现形式是使用对象字面量创建一个对象,不要

  • JavaScript数组去重的五种方法

    javascript数组去重是一个比较常见的需求,解决方法也有很多种,网上都可以找到答案的,下面小编给大家整理了一份关于同类型的数组去重的方法,先给大家介绍下简单实现思路. 思路: 遍历数组,一一比较,比较到相同的就删除后面的 遍历数组,一一比较,比较到相同的,跳过前面重复的,不相同的放入新数组 任取一个数组元素放入新数组,遍历剩下的数组元素任取一个,与新数组的元素一一比较,如果有不同的,放入新数组. 遍历数组,取一个元素,作为对象的属性,判断属性是否存在 1. 删除后面重复的: functio

  • JavaScript中数组的22种方法必学(推荐)

    前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细介绍 对象继承方法 数组是一种特殊的对象,继承了对象Object的toString().toLocaleString()和valueOf()方法 [toString()] toString()方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串 [注意]该方法的返回值与不使用任何参数

  • js中实现继承的五种方法

    借用构造函数 这种技术的基本思想很简单,就是在子类型构造函数的内部调用超类型的构造函数.另外,函数只不过是在特定环境中执行代码的对象,因此通过使用apply()和call()方法也可以在新创建的对象上执行构造函数. function Box(name){ this.name = name } Box.prototype.age = 18 function Desk(name){ Box.call(this, name) // 对象冒充,对象冒充只能继承构造里的信息 } var desk = ne

  • JavaScript 实现继承的几种方式

    非ES6代码实现继承的主流方式主要可以分为: 构造继承.原型链继承.构造继承+原型链继承组合继承.以及在组合继承上衍生出的继承方式. 构造继承 (借助call实现) 实现 function Super(age){ this.age = age; this.say = function(){ console.log(this.age) } } function Child(name,age){ Super.call(this,age) this.name = name; } var child =

  • JavaScript 对象创建的3种方法

    目录 1.对象字面量 2.new 关键字创建对象 3.使用 Object.create() 创建对象 4. 使用扩展操作符:... 5.使用Object.assign()方法 6.简写属性 7.简写方法 前言: 在 JavaScript中,对象是一组有属性名和属性值组成的无序集合,对象的创建可以通过对象字面量.new 关键字 和Object.create()函数来创建. 1.对象字面量 let obj = {} // 空对象 let obj2 = {a:1, b:2} let obj3 = {"

  • 分享JavaScript 类型判断的几种方法

    目录 一.JavaScript 基本类型 1.原始数据类型 2.引用数据类型 3.两种数据类型的存储方式 二.Javascript 数据类型判断的几种方法 1.typeof 2.instanceof 3.构造函数(constructor) 4.Object.prototype.toString.call() 三.写在最后 一.JavaScript 基本类型 首先介绍一下JavaScript中的八大基本类型 1.原始数据类型 除对象类型(object)以外的其它任何类型定义的不可变的值(值本身无法

随机推荐