1. js 其实是一个非面向对象的语言,通过对象的深浅复制完成继承

2. 继承方法

继承的方法有两种

1)prototype 原型模式

举个例子

var Animal = function () {
this.type = 'animal';
this.tmp = {name:'hehe'};
this.eat = function (tmp) {
console.log('animal eat');
};
this.modifyTmp = function (tmp) {
this.tmp.name = tmp;
}
} var Cat = function (name) {
this.type = 'cat';
this.name = name;
this.eat = function () {
console.log('cat eat:' + this.name);
}
} Cat.prototype = new Animal(); var cat1 = new Cat('cat1');
cat1.eat();
cat1.modifyTmp('lala');
console.log(cat1.tmp); // 输出 lala var cat2 = new Cat('cat2');
cat2.eat();
console.log(cat2.tmp); // 输出lala

注意:此处有坑!!

为什么通过原型继承输出的都是 lala 呢?

因为此时的 tmp 的类型为对象 或者 array, 当进行 prototype 继承时, 实际是通过对象引用完成继承,此时 cat1  cat2 都是指向同一个Animal 对象。如果tmp 为基础类型(string,int)时,不存在引用,可以无需担心。

可以将 tmp 重新定义给外部 cat1 cat2 对象,进行重新复制,将会指向两个不同对象,例子如下:

var Animal = function () {
this.type = 'animal';
this.tmp = {name:'hehe'};
this.eat = function (tmp) {
console.log('animal eat');
};
this.modifyTmp = function (tmp) {
this.tmp.name = tmp;
return this.tmp;
}
} var Cat = function (name) {
this.type = 'cat';
this.name = name;
this.tmp = {};
this.eat = function () {
console.log('cat eat:' + this.name);
this.tmp = this.tmp;
}
} Cat.prototype = new Animal(); var cat1 = new Cat('cat1');
cat1.eat();
cat1.tmp = cat1.modifyTmp('lala');
console.log('cat1',cat1); // lala var cat2 = new Cat('cat2');
cat2.eat();
cat2.tmp = cat2.modifyTmp('miaomiao');
console.log('cat2:',cat2); // miaomiao
console.log('cat1',cat1); // lala

2) call apply 方式

这个是利用this 对象偷天换日。

【javascript】继承的更多相关文章

  1. javascript继承的三种模式

    javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...

  2. javascript继承机制的设计思想(ryf)

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...

  3. 【读书笔记】javascript 继承

    在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行. 让Brid 继承 Animal,并扩展自己fly的方法. func ...

  4. 图解JavaScript 继承

    JavaScript作为一个面向对象语言,可以实现继承是必不可少的,但是由于本身并没有类的概念(不知道这样说是否严谨,但在js中一切都类皆是对象模拟)所以在JavaScript中的继承也区别于其他的面 ...

  5. JavaScript强化教程——Cocos2d-JS中JavaScript继承

    javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...

  6. [原创]JavaScript继承详解

    原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

  7. javascript继承(六)—实现多继承

    在上一篇javascript继承—prototype最优两种继承(空函数和循环拷贝)(3) ,介绍了js较完美继承的两种实现方案,那么下面来探讨一下js里是否有多继承,如何实现多继承.在这里可以看看j ...

  8. javascript继承(五)—prototype最优两种继承(空函数和循环拷贝)

    一.利用空函数实现继承 参考了文章javascript继承—prototype属性介绍(2) 中叶小钗的评论,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权 ...

  9. javascript继承(四)—prototype属性介绍

    js里每一个function都有一个prototype属性,而每一个实例都有constructor属性,并且每一个function的prototype都有一个constructor属性,这个属性会指向 ...

  10. 【JavaScript】重温Javascript继承机制

    上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...

随机推荐

  1. 如何解决wamp中数据库读取数据是???的情况?

    数据库中数据正常,但是从数据库读取出的数据在网页中显示时是???,该怎么办呢? 左键点击托盘区的WampServer图标,选择Mysql--my.ini,就会打开配置文件 1.在[client]段落增 ...

  2. 将下载的本地的jar手动添加到maven仓库

    将下载到本地的JAR包手动添加到Maven仓库 常用Maven仓库网址:http://mvnrepository.com/http://search.maven.org/http://reposito ...

  3. 如何自定义容器网络?- 每天5分钟玩转 Docker 容器技术(33)

    除了 none, host, bridge 这三个自动创建的网络,用户也可以根据业务需要创建 user-defined 网络. Docker 提供三种 user-defined 网络驱动:bridge ...

  4. zepto的使用方法

    有些不了解zepto的同学在刚接触的时候肯定有很多疑惑,这个东西怎么用啊,去哪里下载啊,什么时候该用什么时候不该用啊,其实我以前也是这样的.jquery使用多了那么就让我们一起来了解下zepto把. ...

  5. DDD领域驱动之干活(四)补充篇!

    距离上一篇DDD系列完结已经过了很长一段时间,项目也搁置了一段时间,想想还是继续完善下去. DDD领域驱动之干货(三)完结篇! 上一篇说到了如何实现uow配合Repository在autofac和au ...

  6. Swift 求余运算

    求余运算 求余运算(a % b)是计算b的多少倍刚刚好可以容入a,返回多出来的那部分(余数). 注意:求余运算(%)在其他语言也叫取模运算.然而严格说来,我们看该运算符对负数的操作结果,"求 ...

  7. eclipse中Build Path 导入的包和复制到 lib 包的区别

    Java Build Path是我们编译需要的包,在比如在import ***.***.***时如果没用Java Build Path导入包的话类里面就有红叉,说不识别这个类,build path只是 ...

  8. mysql 列类型以及属性特点

    整形列: 一个字节有8个位,例如:int 类型的列存入数字1,00000000 00000000 00000000 00000001它就在最低位置上存入一个1,由此可见是极大的浪费资源,所以在建立列类 ...

  9. 发布.NET MVC网站 到Azure

    最近的项目部署在Microsoft Azure,学习了一些新东西,记录下. 1.账号. 用于登录portal(https://portal.azure.cn/),账号下有对应的Subscription ...

  10. 超好用的memcache管理及可视化监控工具,真方便!

    memcache做为主流的缓存数据库之一,广泛在各互联网平台使用,但是大家使用中都知道memcache目前没有一个比较好用的可视化客户端工具,每次都要输入命令进行操作,十分不方便.  而另一款主流缓存 ...