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中拥有原型这个强大的概念,当对象进行属性查找的时候, ...
随机推荐
- NOIP[2015] 运输计划(codevs 4632)
题目描述 Description 公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n−1 条双向航道,每条航道建立在两个星球之间,这 n−1 条航道连通了 L 国的所有星球.小 P ...
- 洛谷P2483 Bzoj1975 [SDOI2010]魔法猪学院
题目描述 iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPig对猪世界的世界本原有了很多的了解:众所周知,世界是由元素构成的:元素与 ...
- *LOJ#2322. 「清华集训 2017」Hello world!
$n \leq 50000$的树,有点权$\leq 1e13$,$q \leq 400000$次操作,有两种操作:从$s$跳到$t$每次$k$步,不到$k$步直接跳到$t$,每次把经过的点取根号:同样 ...
- 开店 BZOJ 4012
开店 [问题描述] 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱.这样的想法当然非常好啦,但是她们也发现她们面临 ...
- JStorm学习
一.简介 JStorm是一个分布式实时计算引擎.JStorm是一个类似于Hadoop MapReduce的系统,用户按照指定的接口实现一个任务,然后将这个任务交给JStorm系统,JStorm将这个任 ...
- qq空间微博等更多社交平台分享
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- OHIFViewer meteor build 问题
D:\Viewers-master\OHIFViewer>meteor build --directory d:/h2zViewerC:\Users\h2z\AppData\Local\.met ...
- virtualenv 配置python3环境
virtualenv -p /usr/bin/python3 py3env source py3env/bin/activate pip install package-name
- HDU 4422 The Little Girl who Picks Mushrooms(数学)
题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=4422 Problem Description It's yet another festival s ...
- Android平台Camera实时滤镜实现方法探讨(十一)--实时美颜滤镜
上一章完毕了对图片的磨皮处理.经过简单算法流程优化,能够达到非常快的速度.可是不能用于实时美颜.经实验,若採用仅仅处理Y信号的方案.半径极限大约是5-10,超过10则明显感受到卡顿.但对于1920X1 ...