关于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 = ...
随机推荐
- Codeforces710
[未完待续] A The only king stands on the standard chess board. You are given his position in format &quo ...
- 洛谷 P4027 [NOI2007]货币兑换 解题报告
P4027 [NOI2007]货币兑换 题目描述 小 \(Y\) 最近在一家金券交易所工作.该金券交易所只发行交易两种金券:\(A\) 纪念券(以下简称 \(A\) 券)和 \(B\) 纪念券(以下简 ...
- 洛谷 P3157 [CQOI2011]动态逆序对 解题报告
P3157 [CQOI2011]动态逆序对 题目描述 对于序列\(A\),它的逆序对数定义为满足\(i<j\),且\(A_i>A_j\)的数对\((i,j)\)的个数.给\(1\)到\(n ...
- Dirichlet 卷积学习笔记
Dirichlet 卷积学习笔记 数论函数:数论函数亦称算术函数,一类重要的函数,指定义在正整数集上的实值或复值函数,更一般地,也可把数论函数看做是某一整数集上定义的函数. 然而百科在说什么鬼知道呢, ...
- 【51nod1965】奇怪的式子
Portal --> 51nod1965 Solution 怎么说呢..这题..做的有点痛苦.. 首先看这个式子长得..比较奇怪,指数里面那个加号有点烦人,而且这个函数不是一个积性函数也有点烦人 ...
- ACE服务端编程4:ACE跨平台之运行时初始化和关闭
参考APG里的说法:平台差异及不兼容性的一个特别的方面,是对象的运行时初始化和程序关闭时这些对象的相应析构. ACE为了明确管理对象的清理,定义了ACE_Object_Manager类,这个类不仅涉及 ...
- I/O多路复用和异步I/O
一.I/O模式 对于一次IO访问(以read举例),数据会先被拷贝到操作系统内核的缓冲区中,然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间.所以说,当一个read操作发生时,它会经历两个阶段: ...
- C语言 两个小知识点
strlen 函数原型 extern unsigned int strlen(char *s); 在Visual C++ 6.0中,原型为size_t strlen(const char *strin ...
- [php]require&require_once&include&include_once的用法与区别
1.require和include是php引入php文件的两种方式,使用格式如下: require(include) 文件名; require(include) 变量(此变量存储的是文件名); 2.区 ...
- 转:国内优秀npm镜像推荐及使用
原文:http://riny.net/2014/cnpm/ npm全称Node Package Manager,是node.js的模块依赖管理工具.由于npm的源在国外,所以国内用户使用起来各种不方便 ...