javascript 继承实现方法
1. [代码][JavaScript]代码
//1、对象冒充
//说明:构造函数使用this关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。因为构造函数只是一个函数,所以可使ClassA的构造函数成为ClassB的方法,然后调用它。ClassB就会收到ClassA的构造函数中定义的属性和方法。
function ClassA(sColor) {
this.color = sColor;
this.showColor = function() {
alert(this.color);
};
}
function ClassB(sColor, sName) {
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;
this.name = sName;
this.showName = function() {
alert(this.name);
};
}
var oa = new ClassA("RED");
var ob = new ClassB("blue", "red");
oa.showColor();
// RED
ob.showColor();
// blue
ob.showName();
// red
2. [代码][JavaScript]代码
//2、call()方法
//说明:这是与经典的对象冒充方法最相似的方法。它的第一个参数用作this的对象。其他参数都都直接传递给函数自身。其实就相当于前一个是对象,后一个是普通的参数一样。
function showColor(sPrefix, sSuffix) {
alert(sPrefix + this.color + sSuffix);
};
var obj = new Object();
obj.color = "red";
// the color is red ,a very nice color indeed
showColor.call(obj, "the color is ", " ,a very nice color indeed");
function ClassA(sColor) {
this.color = sColor;
this.showColor = function() {
alert(this.color);
};
}
function ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.name = sName;
this.showName = function() {
alert(this.name);
};
}
var ob = new ClassB("red", "ooo");
ob.showColor();
// red
ob.showName();
// ooo
3. [代码][JavaScript]代码
//3、apply()方法
//说明:有两个参数,用作this的对象和要传递给函数的参数的数组。
function showColor(sPrefix, sSuffix) {
alert(sPrefix + this.color + sSuffix);
};http://www.huiyi8.com/jiaoben/
var obj = new Object();
obj.color = "green";
// the color is green ,a very nice color indeed
showColor.apply(obj, new Array("the color is ", " ,a very nice color indeed"));
function ClassA(sColor) {
this.color = sColor;
this.showColor = function() {
alert(this.color);
};
}
function ClassB(sColor, sName) {
ClassA.apply(this, arguments);
this.name = sName;
this.showName = function() {
alert(this.name);
};
}
var ob = new ClassB("red", "ooo");
ob.showColor();
// red
ob.showName();
// ooo
4. [代码][JavaScript]代码
//4、原型链
// 说明:原型链扩展了类的原型定义方式。prototype对象是个模板,要实例化的对象都以这个模板为基础。prototype对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制。原型链的弊端是不支持多重继承。记住,原型链会用另一种类型的对象重写类的prototype属性。因此子类的所有属性和方法必须出现在prototype属性被赋值以后。
// 原型链方式对应原型方式
function ClassA() {
}
ClassA.prototype.color = "red";
ClassA.prototype.showColor = function() {
alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();
ClassB.prototype.name = "redred";
ClassB.prototype.showName = function() {
alert(this.name);
};
var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objA.showColor();
// blue
objB.color = "green";
objB.name = "dodo";
objB.showColor();
// green
objB.showName();
// dodo
alert( objB instanceof ClassA);
// true
alert( objB instanceof ClassB);
// true
5. [代码][JavaScript]代码
//5、混合方式
//说明:与定义类时同样的方式,即利用构造函数方式定义属性,用原型方式定义方法。而在继承机制中,可以用对象冒充继承构造函数的属性,用原型链继承prototype对象的方法。
function ClassA(sColor) {
this.color = sColor;
}
ClassA.prototype.showColor = function() {
alert(this.color);
};
function ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.name = sName;
}
ClassB.prototype = new ClassA();
ClassB.prototype.showName = function() {
alert(this.name);
};广告代码
var objA = new ClassA("BLUE");
objA.showColor();
// BLUE
var objB = new ClassB("red", "baba");
objB.showColor();
// red
objB.showName();
// baba
javascript 继承实现方法的更多相关文章
- 面向对象之继承-5种JavaScript继承的方法
今天我们讨论一下常用的几种继承方法:首先我们创建一个动物函数Animal: function Animal () { this.species = '动物' }再写准备名叫猫咪的函数Cat: func ...
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)
JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...
- JavaScript 继承——三种继承方法及其优劣
原文地址 本文内容 目的 继承的第一步--最简单的继承 私有变量/成员和原型 三种继承方式及其优劣 基本的原型继承 Yahoo JavaScript 模块模式 创建闭包的构造函数 三种方法的代码执 ...
- Javascript中,实现类与继承的方法和优缺点分析
Javascript是一种弱类型语言,不存在类的概念,但在js中可以模仿类似于JAVA中的类,实现类与继承 第一种方法:利用Javascript中的原型链 //首先定义一个父类 function An ...
- 作为前端,你需要懂得javascript实现继承的方法
在ES6之前,javascript不跟其他语言一样,有直接继承的方法,它需要借助于构造函数+原型对象模拟实现继承.现在我们可以利用ES6的extends方法实现继承,如果想了解更多有关ES6实现的继承 ...
- javascript继承的三种模式
javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...
- javascript继承机制的设计思想(ryf)
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
- 【读书笔记】javascript 继承
在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行. 让Brid 继承 Animal,并扩展自己fly的方法. func ...
- 关于JavaScript继承的那些事
在JavaScript中,对象的创建可以脱离类型(class free),通过字面量的方式可以很方便的创建出自定义对象. 另外,JavaScript中拥有原型这个强大的概念,当对象进行属性查找的时候, ...
随机推荐
- ASP.NET2.0 ObjectDataSource的使用详解《转》
原文发布时间为:2008-08-02 -- 来源于本人的百度文章 [由搬家工具导入] ASP.NET2.0 ObjectDataSource的使用详解(2) http://mqingqing123.c ...
- openSUSE Leap 15.0 初始配置
添加源: # 禁用原有软件源 sudo zypper mr -da # 添加阿里镜像源 sudo zypper ar -fc https://mirrors.aliyun.com/opensuse/d ...
- JavaScript ES6中,export与export default
自述: 本来是对new Vue()和export default比较懵的,查了一下,发现我理解错了两者的关系,也没意识到export与export default的区别,先简单的记录一下基本概念,后续 ...
- codevs——2693 上学路线(施工)
2693 上学路线(施工) 时间限制: 2 s 空间限制: 16000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 问题描述 你所在的城市街道好像一个 ...
- Map类的三种实现 <个人练习>
package cn.zmh.zuoye; import java.util.HashMap; import java.util.Iterator; import java.util.Map; imp ...
- Java日志框架-Spring中使用Logback(Spring/Spring MVC)
继上一篇文章http://www.cnblogs.com/EasonJim/p/7800880.html中所集成的是基于Java的普通项目,如果要在Spring和Spring MVC上集成,需要做如下 ...
- 前端模板Nunjucks简介
参考资料: https://mozilla.github.io/nunjucks/ https://mozilla.github.io/nunjucks/templating.html https:/ ...
- keras模型总结
https://keras.io/zh/ https://keras.io/zh/models/about-keras-models/ 在 Keras 中有两类主要的模型:Sequential 顺序模 ...
- BUPT复试专题—最近公共祖先(2014软院)
题目描述 给出一棵有N个节点的有根树TREE(根的编号为1),对于每组查询,请输出树上节点u和v的最近公共祖先. 最近公共祖先:对于有向树TREE的两个结点u,v.最近公共祖先LCA(TREE u,v ...
- 在Nginx上部署ThinkPHP,解决Pathinfo问题
在Nginx上部署ThinkPHP,解决Pathinfo问题 事实上.要解决nginx不支持pathinfo的问题.有两个解决思路,一是不使用pathinfo模式,二是改动nginx的配置文件,使它支 ...