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 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...
随机推荐
- delphi中WEBBrowser网页html相互调用(一)
1.基本操作1.1.激活 var doc,url:Olevariant ; begin url:='about:blank' ;//或者一个有实际意义的url WebBrowser1.Navigate ...
- WCF的配置文件中的要素
Windows Communication Foundation Configuration Schema
- 在网页中插入CSS样式表的几种方法
1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...
- Java Networking: InetAddress
The InetAddress is Java's representation of an IP address. Instances of this class are used together ...
- STM32 定时器用于外部脉冲计数
STM32 定时器用于外部脉冲计数 第一步,设置GPIO GPIO_InitTypeDef GPIO_InitStructure; /* PA0,PA12-> 左右脉冲输入 */GPIO_Ini ...
- poj 1995 Raising Modulo Numbers【快速幂】
Raising Modulo Numbers Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 5477 Accepted: ...
- codeforces 714C解题报告
http://codeforces.com/contest/714/problem/C #include <bits/stdc++.h>//非递归形式建立字典树 using namespa ...
- 一个使用C#的TPL Dataflow Library的例子:分析文本文件中词频
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:一个使用C#的TPL Dataflow Library的例子:分析文本文件中词频.
- Windows操作系统的历史
30 years ago Windows was first released, see how much it has changed回顾了Windows操作系统的历史. 1985, Windows ...