关于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 = ...
随机推荐
- CVE-2017-16995 Ubuntu16.04本地提权漏洞复现
0x01 前言 该漏洞由Google project zero发现.据悉,该漏洞存在于带有 eBPF bpf(2)系统(CONFIG_BPF_SYSCALL)编译支持的Linux内核中,是一个内存任意 ...
- Codeforces 895.D String Mark
D. String Mark time limit per test 4 seconds memory limit per test 256 megabytes input standard inpu ...
- python学习(十五) 内建模块学习
介绍python的几个內建模块,原文链接 1 python的时间模块datetime 取现在时间 from datetime import datetime now = datetime.now() ...
- 题解【bzoj2301 [HAOI2011]Problem b】
Description 求有多少个数对 \((x,y)\) ,满足$ a \leq x \leq b$ ,\(c \leq y \leq d\) ,且 \(\gcd(x,y) = k\),\(\gcd ...
- wx.request 获取不到post传递的值
微信小程序的wx.request请求,method设为POST并向后台传递数据,但从后台返回的信息来看后台并没有获得传递的数据 wx.request({ url: 'url' ...
- OpenCV---色彩空间(一)
颜色空间:用三种或者更多特征来指定颜色的方法,被称为颜色空间或者颜色模型 1.RGB(OpenCV中为BGR): 一幅图像由三个独立的图像平面或者通道构成:红.蓝.绿(以及可选项:透明度alpha通道 ...
- nodejs文件压缩-使用gulp命令(安装过程)
为了代码安全问题,一般发布程序的时候需要将js代码进行压缩,记录一下安装流程.避免忘记. 安装插件
- 816C. Karen and Game 贪心
LINK 题意:给出n*m的矩阵图,现有对行或对列上的数减1的操作,问最少几步使所有数变为0,无解输出-1 思路:贪心暴力即可.先操作行和先操作列结果可能不同注意比较. /** @Date : 201 ...
- My latest news(--2016.12.31)
2016.12.31 前一天晚上看 “纪实新闻” ,白天看视频,晚上刷题,看电影<湄公河行动> 2016.12.30 18:36 昨天上午考完了本学期的最后一门课程,下午乒乓+值班,今天 ...
- Linux下常用命令汇总
1.ls 1.1 统计文件夹下文件数量 ls -l | wc -l 1.2 将文件夹下文件名输出到文件 ls -l > list.txt -F | grep - v[/$] 2.find 2.1 ...