一.传统prototy继承

function Parent() {this.name = "thisIsName";
}
Parent.prototype.sayName = function() {return this.name;
};function Child() {this.age = "thisIsAge";
}Child.prototype = new Parent();/指向Parent实例(包括实例的属性和原型)
Child.prototype.constructor = Child;Child.prototype.sayAge = function() {return this.age;
};var c = new Child();
console.log(c.name);
console.log(c.age);
console.log(c.sayName());
console.log(c.sayAge());

二.利用对象空间继承

创建一个新的构造函数F,为空对象,几乎不占内存

function Chinese() {}
Chinese.prototype.nationality = "Chinese";function Person(name, age) {this.name = name;this.age = age;
}function F(){}; //空对象几乎不占用内存
F.prototype = Chinese.prototype; //指向同一个原型,互相影响
Person.prototype = new F();//new后地址指向F.prototype,F.proptotype也是一个指向原型的地址,故操作Person.prototype不会影响到父类的原型
Person.prototype.constructor = Person;Person.prototype.sayName = function() { //Person的prototype中的方法和属性需要在继承之后定义console.log(this.name);
};var p1 = new Person("Oli", 18);
console.log(p1.nationality); //Chinese
p1.sayName(); //Oli

若想继承非原型上的属性可增加Chiness.call(this);

function Chinese() {this.hhh = 'hhh';//新增!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!this.hello = 'hello';//新增!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1
}
Chinese.prototype.nationality = "Chinese";function Person(name, age) {Chinese.call(this);//新增!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!this.name = name;this.age = age;
}function F(){}; //空对象几乎不占用内存
F.prototype = Chinese.prototype; //指向同一个原型,互相影响
Person.prototype = new F();//new后地址指向F.prototype,F.proptotype也是一个指向原型的地址,故操作Person.prototype不会影响到父类的原型
Person.prototype.constructor = Person;Person.prototype.sayName = function() { //Person的prototype中的方法和属性需要在继承之后定义console.log(this.name);
};var p1 = new Person("Oli", 18);
console.log(p1.nationality); //Chinese
p1.sayName(); //Oli
console.log(p1.hhh);//新增!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
console.log(p1.hello);//新增!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

推荐链接:https://segmentfault.com/a/1190000004906911

http://javascript.ruanyifeng.com/oop/pattern.html#toc0

转载于:https://www.cnblogs.com/krystalcl/p/7008148.html

javascript构造函数继承相关推荐

  1. JavaScript面向对象——理解构造函数继承(类继承)

    JavaScript面向对象--理解构造函数继承(类继承) 构造函数式继承(类继承) function SuperClass(id) {// 引用类型公有属性this.books = ['JavaSc ...

  2. 初学JavaScript:原型继承/盗用构造函数继承/组合继承/寄生式继承/原型式继承/寄生组合式继承

    文章目录 继承 简介 1.原型链继承 默认原型 判断原型与实例间是否为继承关系 原型继承中的方法 原型链的破坏 原型继承的问题 2.盗用构造函数继承 简介 盗用构造函数继承的问题 3.组合继承 简介 ...

  3. js继承之借用构造函数继承

    2018.5.27 今天本人又在查关于继承的问题,重新温习了一遍书,发现之前举的例子实际上不太清晰,故做调整. 我的上一篇文章介绍了,原型链继承模式.原型链继承虽然很强大,但是单纯的原型链模式并不能很 ...

  4. JavaScript实现继承的方式,不正确的是:

    JavaScript实现继承的方式,不正确的是:DA.原型链继承 B.构造函数继承 C.组合继承 D.关联继承 解析 javaScript实现继承共6种方式: 原型链继承.借用构造函数继承.组合继承. ...

  5. JavaScript六种继承方式的递进推演

    1. 原型链继承 function Parent1() {this.name = "Parent1"this.son = [1] } // 需要继承的子类 function Chi ...

  6. 作为前端,你需要懂得javascript实现继承的方法

    在ES6之前,javascript不跟其他语言一样,有直接继承的方法,它需要借助于构造函数+原型对象模拟实现继承.现在我们可以利用ES6的extends方法实现继承,如果想了解更多有关ES6实现的继承 ...

  7. 白话解释 Javascript 原型继承(prototype inheritance)

    来源: 个人博客 白话解释 Javascript 原型继承(prototype inheritance) 什么是继承? 学过"面向对象"的同学们是否还记得,老师整天挂在嘴边的面向对 ...

  8. JavaScript面向对象--继承 (超简单易懂,小白专属)...

    JavaScript面向对象--继承 (超简单易懂,小白专属) 一.继承的概念 子类共享父类的数据和方法的行为,就叫继承. 二.E55如何实现继承?探索JavaScript继承的本质 2.1构造函数之 ...

  9. JavaScript实现继承的方式和各自的优缺点

    ECMAscript只支持实现继承,主要是依靠原型链来实现的. JavaScript实现继承的方式: 类式继承 构造函数继承 组合继承 寄生组合式继承 1.类式继承 1 //类式继承 2 //声明父类 ...

最新文章

  1. 【网络流24题】D、魔术球问题(有向无环图的最小路径覆盖、思维)
  2. 小技巧 | 使用 mv 重命名文件无需两次键入文件名称
  3. 鸿蒙os系统的iphonexr,iPhoneXS/XR终极防水测试:iPhoneXR不幸阵亡
  4. java getname file_Java File getName()方法
  5. java实现高斯赛德尔算法解线性方程组
  6. UML设计,可以设计程序的用例图、类图、活动图等_SurfaceView
  7. css 样式设计学习记录(0)
  8. ccflow表结构与运行机制(二次开发必读)
  9. Spring中的事务回滚 网上比较不错的文章
  10. 高考填报志愿计算机操作技巧,填报高考志愿技巧和方法有哪些
  11. mysql 排名_SQL语句mysql排名、分组后组内排名、取各组的前几名
  12. HBase伪分布式搭建
  13. jquery.cookie 插件使用方法
  14. 用鼠标获取任意窗口的句柄, 并把它当作干儿子
  15. lamp兄弟连 mysql_LAMP兄弟连原创视频教程(笔记五--文件上传下载,mysqli对象,session,cookie,date函数)...
  16. 《HelloGitHub》第 67 期
  17. 反脆弱性:为什么工作越稳定,人生越脆弱?
  18. PPP、PPPOE、PPTP、L2TP应用场合
  19. 考研英语单词-近义词分类-Second Day
  20. Windows CMD中的findstr命令详解

热门文章

  1. MWeb 的基本使用
  2. git学习六:git提交忽略不必要的文件或文件夹
  3. Linux中sort、uniq、cut、wc命令详解
  4. 前端学习 -- 内联框架iframe
  5. Spring @Aspect切面参数传递
  6. Android studio2.3.1 更新以后Error:Failed to open zip file. Gradle's dependency cache may be corrupt
  7. 四大组建进程间通信--基础
  8. Android之drawable state各个属性详解
  9. android进程调试(ro.debuggable=1或android:debuggable=true)----JDWP线程
  10. (二)SpringBoot 整合 JPA