javascript实现继承的6种方式
/*1、原型链继承*/
function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
};
function subType() {
this.subProperty = false;
}
//继承了SuperType
Subtype.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
return this.subProperty;
}; var instance = new subType();
alert(instance.getSuperValue()); //true
/*
问题:包含引用类型值的原型属性会被所有实例属性共享。
原型链实现继承时,原型实际上是另一个类型的实例,
所以原先的实例属性变成了现在的原型属性。
*/
/*2、借用构造函数*/
function SuperType() {
this.colors = {"red", "blue", "green"};
}
function SubType() {
SuperType.call(this); //调用SuperType构造函数对SubType对象初始化,每个SubType实例都有SuperType所有属性和方法
} var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"
/*
问题:方法都在构造函数中定义,无复用性;超类型在原型中定义的方法对子类型不可见
*/
/*3、组合继承(原型链+借用构造函数)*/
function SuperType(name) {
this.name = name;
this.colors = {"red","blue","green"};
}
SuperType.prototype.sayName = function() {
alert(this.name);
};
function SubType(name,age) {
SuperType.call(this,name); //借用构造函数
this.age = age;
}
Subtype.prototype = new SuperType(); //原型链继承
Subtype.prototype.constructor = Subtype;
Subtype.prototype.sayAge = function() {
alert(this.age);
} var instance1 = new SubType("zcj",21);
instance1.colors.push("black"); //"red,blue,green,black"
instance1.sayName(); //"zcj"
instance1.sayAge(); // var instance2 = new SubType("Garg",27);
alert(instance2.colors); //"red,blue,green"
instance1.sayName(); //"Garg"
instance1.sayAge(); //
/*
说明:避免了原型链和借用构造函数的缺陷,融合了其优点,最常用的继承模式
*/
/*4、原型式继承*/
var person = {
name:"Nicholas",
friends:["Shelby","Court","Van"]
}; var anotherPerson = Object.creat("person");
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob"); var yetAnotherPerson = Object.creat("person");
anotherPerson.name = "Linda";
anotherPerson.friends.push("Barbie"); alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"
/*
说明:利用Object.create()方法,将一个对象赋给新对象的原型并返回新对象,包含引用类型值的属性会共享相应的值(如原型模式一样)
*/
/*5、寄生式继承*/
function createAnother(original) {
var clone = object(original); //调用函数创建新对象
clone.sayHi = function() { //增强该对象
alert("hi");
};
return clone; //返回新建对象
}
var person = {
name:"Nicholas",
friends:["Shelby","Court","Van"]
}; var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"
/*思路与工厂模式和寄生构造函数类似,能够返回新对象的函数(如object())接收一个对象作为参数.使用此方法由于不能做到函数的复用性而是效率降低(与构造函数模式类似)
*/
/*6、寄生组合式继承*/
function inheritPrototype(subtype,supertype) {
var prototype = supertype.prototype; //创建对象
prototype.constructor = subtype; //增强对象
subtype.prototype = prototype; //指定对象
}
function SuperType(name) {
this.name = name;
this.colors = ["red","blue","green"]
} SuperType.prototype.sayName = function() {
alert(this.name);
};
function SubType(name,age) {
SuperType.call(this,name); /*借用构造函数*/
this.age = age;
}
inheritPrototype(SubType,SuperType); /*继承原型函数,得到超类型副本*/
SubType.prototype.sayAge = function() {
alert(this.age);
}
var instance = new SubType("zcj", 21); /*只在这里调用了SuperType构造函数,在新对象上创建name和colors属性*/ /*
说明:相对于组合式继承效率更高。只调用了一次SuperType构造函数,避免了在subType.prototype上创建不必要的属性
*/
javascript实现继承的6种方式的更多相关文章
- javascript实现继承的几种方式
原型链方式实现继承 function SuperType(){ this.property = true; this.colors = ['red','blue','green']; } SuperT ...
- 实现JavaScript中继承的三种方式
在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承. 一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...
- javascript实现继承的三种方式
一.原型链继承 function Parent(){} function Child(){} Child.prototype = new Parent(); 通过对象child的prototype属 ...
- JavaScript——实现继承的几种方式
实现继承的6中方法: 借用构造函数 组合继承 原型式继承 寄生式继承 寄生组合式继承 拷贝继承 1. 借用构造函数 在子类型构造函数的内部调用超类构造函数.通过使用apply()和call()方法在新 ...
- javascript实现继承的一种方式
function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototy ...
- javascript中实现继承的几种方式
javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Chi ...
- javascript(js)创建对象的模式与继承的几种方式
1.js创建对象的几种方式 工厂模式 为什么会产生工厂模式,原因是使用同一个接口创建很多对象,会产生大量的重复代码,为了解决这个问题,产生了工厂模式. function createPerson(na ...
- 前端知识体系:JavaScript基础-原型和原型链-实现继承的几种方式以及他们的优缺点
实现继承的几种方式以及他们的优缺点(参考文档1.参考文档2.参考文档3) 要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链:每一 ...
- javascript创建类的6种方式
javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...
随机推荐
- hadoop多机安装HA+YARN
HA 相比于Hadoop1.0,Hadoop 2.0中的HDFS增加了两个重大特性,HA(热备)和Federation(联邦).HA即为High Availability,用于解决NameNode单点 ...
- 【HDOJ】2157 How many ways??
矩阵乘法,用DP做各种wa,后来发现原因了. #include <stdio.h> #include <string.h> typedef struct { ][]; } ma ...
- bzoj1858
比较烦的线段树 首先询问3很弱智不说, 询问4以前做过类似的,好像是USACO月赛hotel那题类似,维护lmax,rmax,max三个域就可以了 操作0,操作1也很简单,仔细考虑一下就知道也是可以l ...
- 将eclipse新建项目的默认编码GBK改为UTF-8
在eclipse下: 新建项目默认编码设置:Window->Preferences->General->Workspace->Text file encoding 将其改为UF ...
- Makefile自动生成头文件依赖
前言 Makefile自动生成头文件依赖是很常用的功能,本文的目的是想尽量详细说明其中的原理和过程. Makefile模板 首先给出一个本人在小项目中常用的Makefile模板,支持自动生成头文件依赖 ...
- Ajax在PC端可以使用但在手机端不能使用
ajax代码如下,仔细看看也没有什么错,电脑端可以调用并正确的返回结果,手机端却不可以 function GetSumData(time) { var device = "Phone&quo ...
- Linux系统下如何修改主机名
vi /etc/sysconfig/network vi /etc/hosts sudo hostname
- gnome设置dvorak键盘布局
若桌面环境为gnome,设置Dvorak键盘程序员布局很简单.系统设置 -> 键盘 -> 布局设置 -> 点击"+" ->选择"英语(适合程序员的 ...
- 使用aespython进行ECB加解密示例
CBC示例: from aespython import cbc_mode, key_expander, aes_cipher key = 'MluJMEZegVmrnWDaBiG1j7lqpkxNH ...
- Eclipse 下载与安装(2014.12.26——by小赞)
Eclipse网站首页:http://www.eclipse.org/home/index.php Eclipse下载页网址:http://www.eclipse.org/downloads/ 步骤一 ...