关于JavaScript中实现继承,及prototype属性
感谢Mozilla 让我弄懂继承。
JavaScript有八种基本类型,函数属于object。所以所有函数都继承自object。//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且都可以被储存在变量里。将这个记在脑子里。
与传统的基于类的面向对象语言不同,javascript中没有从一个类扩展出另一个类的底层类结构。在javascript中,继承是通过简单地从一个对象原形向另一个对象原形复制方法而实现的。---《javascript DOM 高级程序设计》
并且每个函数和对象都有prototype属性。("原型链"(prototype chain)模式)
所有就构造了如同树结构一般的原型链。
常见的几种继承方法:
1.简单的继承
var ClassA={};
ClassA.sayHi=function(){...};
var ClassB={};
ClassB.sayColor=function(){...};
ClassB.sayHi=ClassA.sayHi;
直接复制,简洁明了。缺点是,要是继承的属性过多,需要写大量代码。
2.
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
function ClassB(sColor, sName) {
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod; this.name = sName;
this.sayName = function () {
alert(this.name);
};
}
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor(); //输出 "blue"
objB.sayColor(); //输出 "red"
objB.sayName();//输出 "John"
以上代码,主要的在标红部分,先解释ClassB函数体中标红第一句:
this.newMethod = ClassA;
this是指的当前对象的拥有者。代码,this.newMethod = ClassA在ClassB的函数体中。
假如我var v=new ClassB();//ClassB函数体中的this就指代的v,因为v是ClassB函数体的拥有者。
//以上代码,具体经历了哪些步骤,我们先分析一下:
this肯定是指的ClassB。所以this.newMethod 可以就解释为ClassB新建一个newMethod属性并且赋值ClassA。//this.XXX快速建立一个属性,或者修改属性值 接着解释ClassB标红第二句:
this.newMethod(sColor);
关键在这第二句,代码上的this毋庸置疑肯定是指的ClassB。具体执行表示:执行newMethod函数。//就是执行ClassA
//步骤解释
newMethod既然赋值为ClassA,那newMethod就有ClassA所有属性和方法
function newMethod(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
之前说过,this当前对象拥有者,newMethod是ClassB的属性,所有newMethod函数体中的this指代的是ClassB
执行函数体中的代码就是,ClassB.color=Scolor;ClassB.sayColor=function...;//动态添加属性
ClassB中的第三句:
delete this.newMethod;//删除属性
既然我ClassB已经拥有了ClassA中的方法和属性了,newMethod对ClassB已经没有用了。
3.
function ClassA() {
this.color = "red";
this.sayColor = function () {
console.log(this.color);
};
}
ClassA.prototype.height=100;
function ClassB() {
this.color="bule";
}
ClassB.prototype=new ClassA();
ClassB.prototype.width=200;
var b =new ClassB();
b.sayColor();//bule
如下例:
var BaseCalculator = function() {
this.t=2;
};//这是一个构造函数 BaseCalculator.prototype = {
add: function(x, y) {
return x + y;
},
subtract: function(x, y) {
return x - y;
}
};
var Calculator = function () {
//为每个实例都声明一个数字
this.tax = 5;
}; Calculator.prototype = new BaseCalculator();//继承
//Calculator.prototype.constructor=Calculator;
Calculator.prototype.add = function (x, y) {
return x + y + this.tax;
};
(样式图 根据上代码画图)
如样式图--详细解释
关于JavaScript中实现继承,及prototype属性的更多相关文章
- Javascript中的继承与Prototype
之前学习js仅仅是把w3school上的基本语法看了一次而已,再后来细看书的时候,书中会出现很多很多没有听过的语法,其中一个就是js的继承以及总能看到的prototype.我主要在看的两本js书是&l ...
- JavaScript中Function原型及其prototype属性的简单应用
大家都知道在JavaScript中是没有类的概念的,但是却是有对象的概念的.有的人可能理解对象和类有些迷糊,这里简单的概括一下他们之间的区别: 类:抽象的概念,例如人,动物,汽车等都可以抽象成一个类 ...
- 深入了解JavaScript中基于原型(prototype)的继承机制
原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用 ...
- JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...
- 浅谈JavaScript中的继承
引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...
- JavaScript中的继承(原型链)
一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...
- 彻底搞懂JavaScript中的继承
你应该知道,JavaScript是一门基于原型链的语言,而我们今天的主题 -- "继承"就和"原型链"这一概念息息相关.甚至可以说,所谓的"原型链&q ...
- 浅谈 JavaScript 中的继承模式
最近在读一本设计模式的书,书中的开头部分就讲了一下 JavaScript 中的继承,阅读之后写下了这篇博客作为笔记.毕竟好记性不如烂笔头. JavaScript 是一门面向对象的语言,但是 ES6 之 ...
- javascript中各种继承方式的优缺点
javascript中实现继承的方式有很多种,一般都是通过原型链和构造函数来实现.下面对各种实现方式进行分析,总结各自的优缺点. 一 原型继承 let Super = functioin(name = ...
随机推荐
- 洛谷 P2123 皇后游戏 解题报告
P2123 皇后游戏 题意: 给定\(T\)组长为\(n\)的\(A\),\(B\)数组和\(C\)的计算方法,求一种排列方法,使最大的\(C\)最小化. 数据范围: \(1 \le T \le 10 ...
- NOIP2017 Day2 T2 宝藏(状压DP)
$O(n*3^n)$好难想...还有好多没见过的操作 令$f[i][j]$表示最深深度为i,点的状态为j的最小代价,每次枚举状态$S$后,计算$S$的补集里的每个点与S里的点的最小连边代价,再$O(3 ...
- 网络编程----socket介绍、基于tcp协议的套接字实现、基于udp协议的套接字实现
一.客户端/服务器架构(C/S架构) 即C/S架构,包括: 1.硬件C/S架构(打印机) 2.软件C/S架 ...
- Eclipse错误笔记!
1.ERROR: JDWP Unable to get JNI 1.2 environment, jvm->GetEnv() return code = -2 JDWP exit error ...
- 接口自动化测试框架HttpRunner
接口自动化测试框架 https://github.com/HttpRunner/HttpRunner http://debugtalk.com/post/ApiTestEngine-api-test- ...
- 【BZOJ】4318: OSU! 期望DP
[题意]有一个长度为n的01序列,每一段极大的连续1的价值是L^3(长度L).现在给定n个实数表示该位为1的概率,求期望总价值.n<=10^5. [算法]期望DP [题解]后缀长度是一个很关键的 ...
- 【CodeForces】899 F. Letters Removing
[题目]F. Letters Removing [题意]给定只含小写字母.大写字母和数字的字符串,每次给定一个范围要求删除[l,r]内的字符c(l和r具体位置随删除变动),求m次操作后的字符串.n&l ...
- 20155117 王震宇 2006-2007-2 《Java程序设计》第三周学习总结
20155117 王震宇 2006-2007-2 <Java程序设计>第三周学习总结 教材学习内容总结 在JAVA程序编写中,常常要用到对象(Object),要产生对象首先要定义类(Cla ...
- C语言易错点
C语言易错点 1.每个C语言程序中main函数是有且只有一个的. 2.算法可以没有输入,但必须要有输出. 3.在函数中不可以再定义函数. 4.break可用于循环结构和switch语句. 5.brea ...
- spring-boot支持websocket
spring-boot本身对websocket提供了很好的支持,可以直接原生支持sockjs和stomp协议.百度搜了一些中文文档,虽然也能实现websocket,但是并没有直接使用spring-bo ...