感谢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属性的更多相关文章

  1. Javascript中的继承与Prototype

    之前学习js仅仅是把w3school上的基本语法看了一次而已,再后来细看书的时候,书中会出现很多很多没有听过的语法,其中一个就是js的继承以及总能看到的prototype.我主要在看的两本js书是&l ...

  2. JavaScript中Function原型及其prototype属性的简单应用

    大家都知道在JavaScript中是没有类的概念的,但是却是有对象的概念的.有的人可能理解对象和类有些迷糊,这里简单的概括一下他们之间的区别: 类:抽象的概念,例如人,动物,汽车等都可以抽象成一个类 ...

  3. 深入了解JavaScript中基于原型(prototype)的继承机制

    原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用 ...

  4. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  5. 浅谈JavaScript中的继承

    引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...

  6. JavaScript中的继承(原型链)

    一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...

  7. 彻底搞懂JavaScript中的继承

    你应该知道,JavaScript是一门基于原型链的语言,而我们今天的主题 -- "继承"就和"原型链"这一概念息息相关.甚至可以说,所谓的"原型链&q ...

  8. 浅谈 JavaScript 中的继承模式

    最近在读一本设计模式的书,书中的开头部分就讲了一下 JavaScript 中的继承,阅读之后写下了这篇博客作为笔记.毕竟好记性不如烂笔头. JavaScript 是一门面向对象的语言,但是 ES6 之 ...

  9. javascript中各种继承方式的优缺点

    javascript中实现继承的方式有很多种,一般都是通过原型链和构造函数来实现.下面对各种实现方式进行分析,总结各自的优缺点. 一 原型继承 let Super = functioin(name = ...

随机推荐

  1. 温习classList api

    有道题是一个removeClass的功能,代码里是正则分隔了传入的name,根据name的个数,循环移除掉,让寻找bug..看了了这几行代码,首先想到的是我会如何去优化. 如果看代码一两分钟就能找到公 ...

  2. 【HEOI 2018】林克卡特树

    转载请注明出处:http://www.cnblogs.com/TSHugh/p/8776179.html 先说60分的.思路题解上很清晰: 问题似乎等价于选K+1条点不相交的链哎!F(x,k,0/1/ ...

  3. LOJ #6037.「雅礼集训 2017 Day4」猜数列 状压dp

    这个题的搜索可以打到48分…… #include <cstdio> #include <cstring> #include <algorithm> ; bool m ...

  4. poj3254 Corn Fields

    orn Fields Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 17989   Accepted: 9474 Descr ...

  5. BNU-2017.7.3排位赛1总结

    比赛链接:https://www.bnuoj.com/v3/contest_show.php?cid=9146#info A题 国际象棋棋盘,黑白相间染色. B题 最大值只取决于每个连通块的大小,一个 ...

  6. Linux下调整根目录的空间大小

    原文 一.目的 在使用CentOS6.3版本Linux系统的时候,发现根目录(/)的空间不是很充足,而其他目录空间有很大的空闲,所以本文主要是针对现在已有的空间进行调整.首先,先来查看一下系统的空间分 ...

  7. kendalltau肯德尔和谐系数

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...

  8. centos7下安装配置jenkins+git+maven+jdk

    环境 centos7 jdk1.8 maven3 git 在安装jenkins之前,先安装jdk1.8.maven.git 一. 安装jdk1.8 第一步:下载 jdk-8u131-linux-x64 ...

  9. jQuery常用插件大全

    1.五星级插件jRating 详细文档介绍:http://www.myjqueryplugins.com/jquery-plugin/jrating 2.图片展示插件Swiper和Slider swi ...

  10. POJ 2431 优先队列

    汽车每过一单位消耗一单位油,其中有给定加油站可加油,问到达终点加油的最小次数. 做法很多的题,其中优先对列解这题是很经典的想法,枚举每个加油站,判断下当前油量是否小于0,小于0就在前面挑最大几个直至油 ...