【读书笔记】javascript 继承

在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行。

让Brid 继承 Animal,并扩展自己fly的方法。

    function Animal(name) {
                this.name = name;
                this.type = "animal";
            }
            Animal.prototype= {
                say:function() {
                    alert("I‘m a " + this.type + ",my name is " + this.name);
                }
            }

            function Bird(name) {
                Animal.call(this, name);
            }
            //这里继承了父类的行为 say
            Bird.prototype = Animal.prototype;
            //再扩展自己的方法
            Bird.prototype.fly=function() {
                alert("I‘m flying");
            }
            var mybird = new Bird("xiao cui");           mybird.say();//I‘m a animal,my name is xiao cui
            mybird.fly();
            //结果狗也能飞起来了.....
            var mydog = new Animal("cai cai ");
            mydog.fly();

造成这种现象,是因为JavaScript中传值和传址的区别。如果是数值型、布尔型、字符型等基本类型进行赋值的时候会讲数据复制一份,即传值。而如果是数组、hash对象等复杂类型、赋值的时候是直接用到内存地址。也就是传址。这和C#引用类型和值类型的赋值道理一样,只是JavaScript和C#各自包含的类型不一样。

            var a = 10;
            var b = a;
            b++;
            var c = [1, 2, 3];
            var d = c;
            d.push(4);
            alert(a);//10
            alert(b);//11
            alert(c);//1,2,3,4
            alert(d);//1,2,3,4

所以数组如果不想受到上面的影响 需要用slice和concat方法。要不就循环赋值。

           var a = [1, 2, 3];
            var b = a.slice();
            var c = a.concat();
            b.pop();
            c.push(4);
            alert(a);//1,2,3;
            alert(b);//1,2
            alert(c);//1,2,3,4

回到Bird的问题,property本质上也是个hash对象,直接赋值就是传址,所以造成了Dog也fly的笑话。然后做一下改动:

 function Animal(name) {
                this.name = name;
                this.type = "animal";
            }
            Animal.prototype= {
                say:function() {
                    alert("I‘m a " + this.type + ",my name is " + this.name);
                }
            }
            function Bird(name) {
                //这里只继承属性的。
                Animal.call(this, name);
            }
            //这里继承了父类的行为 say
            Bird.prototype = new Animal();
            Bird.prototype.constructor = Bird;
            //再扩展自己的方法
            Bird.prototype.fly=function() {
                alert("I‘m flying");
            }
            var mybird = new Bird("xiao cui");
            mybird.say();//I‘m a animal,my name is xiao cui
            mybird.fly();

            var dog = new Animal("xiao huang");
            dog.fly();//报错了

使用new someFunction实现传值,而后因为Bird.property=new Animal();将Bird.property.constructor指向了Animal,所以用Bird.property.constructor=Bird 纠正回来。

这个时候调用dog.fly 就报错了:

JavaScript继承的话题各路大神都讨论比较多了,写一写,自己梳理下。 更多的了解可以看阮一峰的博客

学习书籍:web前端开发修炼之道

下载链接不是我个人的,公司连百度云都屏蔽了,回去再换百度云的,这本书基于作者的自己的一些经验总结,名字有些浮夸。经验丰富的开发者都可以快速的阅读的一本书。

时间: 02-01

【读书笔记】javascript 继承的相关文章

JavaScript语言精粹读书笔记- JavaScript对象

JavaScript 对象 除了数字.字符串.布尔值.null.undefined(都不可变)这5种简单类型,其他都是对象. JavaScript中的对象是可变的键控集合(keyed collections). 对象是属性的容器,其中每个属性都拥有名字和值. JavaScript中的对象是无类别的(class-free)的.它对新属性的名字和值没有约束. JavaScript包括一个原型链特性,允许对象继承另一对象的属性. 对象的检索: stooge[“first-name”]或者stooge.

读书笔记----JavaScript 权威指南(一)

0.前言 最近小编我刚刚结束上一段的工作,结果立马就马不停蹄的开始了新一轮的工作了,表示无辜,(o′?ェ?`o),程序猿真是个累死人不偿命的工作呀. 今天晚上看到同事新启封的 JavaScript 权威指南,心血来潮的想,如果我能把这个书里面的重点以及具体知识点梳理出来,那么后来的人是不是就能少走一些弯路呢? 抱着这个想法,于是就开始了今天晚上的读书之旅,更由于小编喜欢整理东西这个习惯,才有了此文. 真心希望看到这篇文章的你,能够感受到小编那深沉的爱!~ 1.JavaScript 语法核心 之

《JavaScript权威指南》读书笔记——JavaScript核心

前言 这本由David Flanagan著作,并由淘宝前端团队译的<JavaScript权威指南>,也就是我们俗称的“犀牛书”,算是JS界公认的“圣经”了.本书较厚(有1004页),读起来颇费功夫,但作为JavaScript(下文简称:JS)相关从业者,我还是鼎力推荐,一定要读完这本经久不息,好评如潮的JS“圣经”(如果您有耐心的读完,觉得还不错的,博客最后附有购买本书的优惠券,可自行领取). 说完本书重要性,下面重点介绍一下本书作者写书的逻辑性,简单来说本书分为四部分,第一部分:JS核心:第

《Javascript高级程序设计》读书笔记之继承

1.原型链继承 让构造函数的原型对象等于另一个类型的实例,利用原型让一个引用类型继承另一个引用类型的属性和方法 function SuperType() { this.property=true; } SuperType.prototype.getSuperValue=function(){ return this.property; }; function SubType() { this.subProperty=false; } //继承SuperType SubType.prototype

JavaScript语言精粹读书笔记 - JavaScript函数

JavaScript是披着C族语言外衣的LISP,除了词法上与C族语言相似以外,其他几乎没有相似之处. JavaScript 函数: 函数包含一组语句,他们是JavaScript的基础模块单元,用于代码复用.信息隐藏和组合调用. 函数用于指定对象的行为. 函数对象Functions: 在JavaScript中函数就是对象.对象是"键值"对的集合并拥有一个连接到原型对象的隐藏连接. 对象字面量产生的对象连接到Object.prototype.函数对象连接到Function.prototy

网摘读书笔记----javascript语言精粹

原文链接:http://www.cnblogs.com/Cohlint/archive/2012/11/26/2788790.html 1.6种值会为假(==false),分别是false,null,undefined,' ',0,NaN 2.typeof有6种值,分别是'number','string','boolean','undefined','function','object';其中typeof(null),结果是'object' 3.number类型总是64位浮点数,两个整数相除也可

读书笔记——javascript变量作用域

<JavaScript权威指南>第6版第三章第10节: 一个变量的作用域(scope)是程序源代码中定义这个变量的区域.全局变量拥有全局作用域,在JavaScript代码中的任何地方都是有定义的.然而在函数内声明的变量只在函数体内有定义.它们是局部变量,作用域也是局部的.函数参数也是局部变量,它们只在函数体内有定义.   在函数体内,局部变量的优先级高于同名的全局变量.如果在函数内声明的一个局部变量或函数参数中带有的变量和全局变量重名,那么全局变量就被局部变量所遮盖. var scope = 

读书笔记-JavaScript面向对象编程(一)

PDF下载链接: http://pan.baidu.com/s/1eSDSTVW 密码: 75jr 第1章 引言 1.1 回顾历史 1.2 变革之风 1.3 分析现状 1.4 展望未来 1.5 面向对象的程序设计 1.5.1 对象(属性和方法的集合) 1.5.2 类 (相似对象的共同特征,如麻雀.老鹰都是鸟类) 1.5.3 封装 (将属性和方法集合起来,也有封闭作用域的概念,如封装一个播放器对象) 1.5.4 聚合 (将几个对象合并成一个对象) 1.5.5 继承 (一个实例对象继承父级对象的一些

读书笔记-JavaScript中的全局对象

对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用.这个JavaScript自身提供的全局对象的功能包括: 1.全局对象拥有一些常用的属性值.比如undefined.Infinity以及NaN.2.全局对象拥有一些常用的属性对象.比如Math.JSON和Number对象均为该全局对象的属性.3.全局对象提供一些全局函数供调用.比如isNaN().isFinite().parseInt()和eval()等.4.全局对象提供一些全局构造器

《Head First Java》读书笔记——7 继承与多态

(一)继承范例 1.范例一: 1 pulic class Doctor{ 2 boolean worksAtHospital; 3 void treatPatient(){ 4 //执行检查 5 } 6 } 7 public class FamilyDoctor extends Doctor{ 8 boolean makesHouseCalls; 9 void giveAdvice(){ 10 //提出诊断 11 } 12 } 13 public class Surgeon extends Do