继承

  所谓继承就是子类继承父类的特征与行为,使得子类对象具与父类相同的行为。但是javascript 是没有class、抽象类、接口等抽象概念,javascript 只有对象,那么js中是如何让对象与对象之间产生继承关系呢?

基于对象的继承

  在原型链中说过,如果在对象上没有找到需要的属性或者方法引用,js引擎就会继续在内部属性[[prototype]] 指向的对象上进行查找。同理如果还是没有找到需要的引用,就会继续查找它的内部属性[[prototype]]指向的对象,以此类推,层层向上直到找到对象的原型为null为止,这一系列的链接称为原型链。所以在原型链中我才会js中的继承是基于原型实现;

_proto_ 设计机制

  任何对象都有一个特殊的内部属性[[prototype]],[[prototype]]机制就是建立起对象之间的内部链接。如果有过后台开发经验的肯定会纳闷,为什么js要这样设计?引入原型对象的意义又是什么?为什么不跟java、.net 一样设计calss等等凝惑, 这里推荐 阮一峰的《Javascript继承机制的设计思想》

组合继承

  组合继承是比较常用的一种继承方法,思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又保证每个实例都有它自己的属性。

  //人
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.SayName = function () {
return this.name;
};
//父亲
function Parent(work, country, name, age) {
this.work = work;
this.country = country;
this.parentInfo = function () {
return 'hello 大家好,我叫:' + this.name +' 我是一名:' + this.work + ',我来自:' + this.country;
}
Person.call(this, name, age);//父类型传参
}
Parent.prototype = new Person();//重写Parent的原型对象,让parent的prototype 指向 Person 的实例
var myParent = new Parent('manager', 'China', 'Joel', 22);
console.log(myParent.SayName());//Joel
console.log(myParent.parentInfo());//hello 大家好,我叫:Joel 我是一名:manager,我来自:China //儿子
function Child(work, country, name, age, sex) {
this.sex = sex;
this.childInfo = function () {
return 'hello 大家好,我叫:' + this.name + ' 我是一名:' + this.work + ',我来自美丽的:' + this.country
+ ',我是一个活泼可爱的 ' + this.sex;
}
Parent.call(this, work, country, name, age);//父类型传参
} Child.prototype = new Parent();//重写Child的原型对象,让Child的prototype 指向 Parent 的实例
var myBaby = new Child('child', '广州', '超级飞侠-多多', 3, 'girl');
console.log(myBaby.parentInfo());//hello 我是一名:child,我来自:广州
console.log(myBaby.childInfo());//hello 大家好,我叫:超级飞侠-多多 我是一名:child,我来自美丽的:广州,我是一个活泼可爱的 girl

这里基类是人,子类是父亲、儿子,这里通过重写原型对象以及在构造函数中调用父类的构造函数,并且用call改变了this 指针,从而达到儿子继承了父亲,父亲继承了人;

new 操作符

重要的事情在这里说一次,之前在原型链中已经提过一次;

MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new 的解释

当使用new去调用构造函数时,相当于执行了

  var o = {};
o.__proto__ = F.prototype;//实例跟原型对象之间建立了链接,实例跟构造函数之间没有关系;
F.call(o);

总结

  • 对象之间的链接通过[[prototype]]进行关联
  • new 操作符关键点
  • prototype 是函数对象的属性,_proto_ 是实例的内部属性[[prototype]]
  • 原型链是沿着_proto_链接进行查找

javascript 之继承-15的更多相关文章

  1. Javascript模拟继承(赠送.net吐槽一段)

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  2. 详解Javascript的继承实现(二)

    上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...

  3. Javascript之继承(原型链方式)

    1.原型链 原型链是JavaScript中继承的主要方法. 每个构造函数都拥有一个原型对象,原型对象都包含一个指向构造函数的指针(constructor),实例都包含一个指向原型对象的内部指针(__p ...

  4. JavaScript之继承(原型链)

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

  5. javascript深度克隆与javascript的继承实现

    1.javascript深度克隆: //注意这里的对象包括object和array function cloneObject(obj){ var o = obj.constructor === Arr ...

  6. 再谈javascript原型继承

    Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍<Javascript模式>中关于原型实现继承的几种方法,下面来一一说明下 ...

  7. TDD测试驱动的javascript开发(3) ------ javascript的继承

    说起面向对象,人们就会想到继承,常见的继承分为2种:接口继承和实现继承.接口继承只继承方法签名,实现继承则继承实际的方法. 由于函数没有签名,在ECMAScript中无法实现接口继承,只支持实现继承. ...

  8. 彻底理解Javascript原型继承

    彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员 ...

  9. Javascript原型继承容易忽略的错误

    编写Javascript的开发者都知道,JS虽然没有类(ES6添加了class语法),但是可以模拟出OOP语言的类和面向对象的概念,比如我们都知道的一句话,Javascript中处处是对象,而面向对象 ...

随机推荐

  1. LAMP第四部分mysql操作

    1. 忘记root密码编辑mysql主配置文件 my.cnf 在[mysqld]字段下添加参数  skip-grant  ,重启数据库服务,这样就可以进入数据库不用授权了 mysql -uroot , ...

  2. pwd 命令详解

    pwd 作用: 以绝对路径的方式显示用户当前工作目录,命令将当前目录的全路径名称(从根目录)写入标准输出, 全部目录使用/分隔,第一个/表示根目录, 最后一个/ 表示当前目录. 执行pwd 命令可以立 ...

  3. 详解PHP反射API

    PHP中的反射API就像Java中的java.lang.reflect包一样.它由一系列可以分析属性.方法和类的内置类组成.它在某些方面和对象函数相似,比如get_class_vars(),但是更加灵 ...

  4. windows日志监控

    bat脚本,主要作用,每个五分钟读取日文本件中新增内容,进行错误赛选,如果有错误信息,将错误信息用邮件发送给管理员. 其中awk和sed需要手动下载 :读取number.txt文档,获取上一次执行时文 ...

  5. Java <clinit> & <init>

    在编译生成class文件时,会自动产生两个方法,一个是类的初始化方法<clinit>, 另一个是实例的初始化方法<init>.     <clinit>:在jvm第 ...

  6. Macaca环境配置及样例执行

    1.Macaca简介 macaca是由阿里巴巴公司开发的一套自动化解决方案,适用于PC端和移动端.Macaca基于Node.js开发,测试案例编写语言暂时也只支持Node.js. 2.Macaca与A ...

  7. [转]Android sharedpreferences使用

    1.    SharedPerferences保存的数据主要是类似配置信息格式的数据,因此它保存的数据主要是简单类型的key-value对,SharedPreferences本身并没有写入数据的能力, ...

  8. animate.css – 齐全的CSS3动画库

    animate.css – 齐全的CSS3动画库 演 示 下 载   简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...

  9. MySQL数据库学习: 02 —— 数据库的安装与配置

                             MySQL安装图解 一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.0.27-win32.zip,双击解压缩,运行“setup. ...

  10. 基于Vue+node.js的个人博客

    前言 作为一个年轻的程序员,而且是作为一个未来的前端工程师,怎么能没有一个属于自己的博客呢,于是乎在暑假咸鱼了一个多月后开始了我的博客的编写. 技术栈 前端 vue.js+scss  因为当时没学vu ...