关于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 = ...
随机推荐
- 那个执事,争先:我如何于 2015 年在 Java Web 项目中推动 HTTP/2
2015 年 5 月,HTTP/2 发布. 2015 年第 3 季度,我所在企业的一个战略级客户(而且是第二大客户)说,他们需要在当年年底之前支持 HTTP/2(原因忘了,且与本文无关,从略). 而在 ...
- 【CF484E】Sign on Fence(主席树)
[CF484E]Sign on Fence(主席树) 题面 懒得贴CF了,你们自己都找得到 洛谷 题解 这不就是[TJOI&HEOI 排序]那题的套路吗... 二分一个答案,把大于答案的都变成 ...
- bzoj2296: 【POJ Challenge】随机种子(思维题/水题)
有点类似CF某场div2T1... 前面接上1234567890000000,后面加上x+(1234567890000000%x)就可以保证是x的倍数了 #include<iostream> ...
- python基础----文件处理
一.文件处理流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 正趣果上果 Interesting fruit fruit 词:郭婞 曲:陈粒 编曲/混音/和声:燕池 萧: ...
- Codeforces Round #301 (Div. 2)A B C D 水 模拟 bfs 概率dp
A. Combination Lock time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- STL源码分析-function
http://note.youdao.com/noteshare?id=269e16541b43095eaf97636d4e046b1d
- k8s本地搭建相信步骤
搭建前的准备: 主机名配置 cat >/etc/hosts<<EOF127.0.0.1 localhost localhost.localdomain localhost4 loca ...
- DialogFragment 将数据传回Activity的onActivityResult方法
在MyActivity中 弹出一个DialogFragment (某一个控件的点击事件) search= findViewById(R.id.search); search.setOnClickLis ...
- 重构改善既有代码设计--重构手法07:Remove Assignments to Parameters (移除对参数的赋值)
代码对一个 参数赋值.以一个临时变量取代该参数的位置. int Discount(int inputVal, int quantity, int yearTodate) { if (input ...
- 利用PhantomJS生成网站截图
var page = require('webpage').create(); page.open('http://qq.com', function () { page.render('exampl ...