1.

/* -- 类式继承 -- */
//先声明一个超类

function Person(name) {
this.name = name;
}
//给这个超类的原型对象上添加方法 getName
Person.prototype.getName = function() {
return this.name;
}
//实例化这个超
var a = new Person('Darren1')
console.log(a.getName());//Darren1

//再声明类

function Programmer(name, sex) {
//这个类中要调用超类Person的构造函数,并将参数name传给它
Person.call(this, name);
this.sex = sex;
}
//这个子类的原型对象等于超类的实例
Programmer.prototype = new Person();
// 因为子类的原型对象等于超类的实例,所以prototype.constructor这个方法也等于超类构造函数,你可以自己测试一下,如果没这一 步,console.log(Programmer.prototype.constructor这个是Person超类的引用,所以要从新赋值为自己本 身

console.log(Programmer.prototype.constructor);
/*function Person(name) {
this.name = name;
} */

Programmer.prototype.constructor = Programmer;
console.log(Programmer.prototype.constructor);

/*function Programmer(name, sex) {
Person.call(this, name);
this.sex = sex;
}
*/
//子类本身添加了getSex 方法
Programmer.prototype.getSex = function() {
return this.sex;
}
//实例化这个子类
var _m = new Programmer('Darren2', 'male');
//自身的方法
console.log(_m.getSex());//male
//继承超类的方法
console.log(_m.getName());//Darren2

2.
/* -- clone()方法封装的原型式继承 -- */
//clone()函数用来创建新的类Person对象
var clone = function(obj) {
var _f = function() {};
//这句是原型式继承最核心的地方,函数的原型对象为对象字面量
_f.prototype = obj;
return new _f;
}
//先声明一个对象字面量
var Person = {
name: 'Darren',
getName: function() {
return this.name;
}
}
//不需要定义一个Person的子类,只要执行一次克隆即可
var Programmer = clone(Person);
//可以直接获得Person提供的默认值,也可以添加或者修改属性和方法
alert(Programmer.getName())
Programmer.name = 'Darren2'
alert(Programmer.getName())

//声明子类,执行一次克隆即可
var Someone = clone(Programmer);

4、继承的第四种方式:真正原型链方式,即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child,从而实现了继承
  function Person(){
  }
  Person.prototype.hello = "hello";
  Person.prototype.sayHello = function(){
    alert(this.hello);
  }
 
  function Child(){
  }
  Child.prototype = new Person();//这行的作用是:将Parent中将所有通过prototype追加的属性和方法都追加到Child,从而实现了继承
  Child.prototype.world = "world";
  Child.prototype.sayWorld = function(){
    alert(this.world);
  }
 
  var c = new Child();
  c.sayHello();
  c.sayWorld();

JS 继承(类式 与 原型式)相关推荐

  1. JavaScript继承(四)——原型式继承

    2019独角兽企业重金招聘Python工程师标准>>> 道格拉斯·克罗克福特在2006年提出了原型式继承,他的想法是基于已有的对象借助原型创建新对象,同时还不必因此创建一个自定义类型 ...

  2. JS原型继承和类式继承

    类式继承(构造函数) JS中其实是没有类的概念的,所谓的类也是模拟出来的.特别是当我们是用new 关键字的时候,就使得"类"的概念就越像其他语言中的类了.类式继承是在函数对象内调用 ...

  3. php中 继承中的概念,JavaScript_JavaScript中的继承方式详解,js继承的概念 js里常用的如下 - phpStudy...

    JavaScript中的继承方式详解 js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于 ...

  4. js继承的六种方式详解--认真看完你就会了

    今天 主要来研究一下继承这个东西 继承 共分为六种继承方式: 原型链继承 盗用构造函数继承 组合继承 实例继承(原型式继承) 寄生式继承 寄生式组合继承 原型链继承 原型链继承是ES主要继承方法,其中 ...

  5. [原创] JS 继承详解。欢迎拍砖

    最近迷上了JS 没办法 搞WEB离不开这东西 ,所以如果哪位仁兄还说JS无用论 还请绕道 过开发积累的经验 加上书本上的知识 (也算是理论与实际相结合吧)总结此文 也算是自己学习阶段的一份总结吧 !希 ...

  6. 学习js继承的6种方式

    关于原型,原型链,构造函数和实例关系,可以参考上一篇文章 地址:juejin.im/post/5cbfb3- js 实现继承的方式一:原型链继承 function Father(){this.name ...

  7. JS继承的6种方法详解以及优缺点对比

    1. 原型链继承 方法 我们知道构造函数.原型对象和实例的关系:每个构造函数都有一个原型对象,原型对象(.prototype)的constructor属性指向构造函数,而实例的 __proto__指向 ...

  8. 【JS继承】常见的7种继承方式

     自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...

  9. 深入理解原型链与继承(详解JS继承原理)

    文章目录 原型链与继承 new 关键字的执行过程 构造函数.实例对象和原型对象 原型链的概念及图解 第一层`__proto__`指向:实例对象 第二层`__proto__`指向:`Function.p ...

最新文章

  1. 排球赛程序(个人作业)
  2. Unity中实现Hololens的三维空间映射Spatial mapping
  3. python爬快手个人介绍个性_快手个性个人介绍句子签名 快手自己介绍模板句子...
  4. cfb为什么不需要填充_为什么很多高中生数学成绩不理想,需要补课?因为不熟练啊!...
  5. Atom JS 代码智能提示补全
  6. Restful对于URL的简化
  7. 深度linux 转中文,Linux Deepin 中文Linux系统的新希望?
  8. matlab从哪里学,从零开始学MATLAB(附光盘)/从零开始学系列
  9. Oracle location,oracle秘境探索之11g tablespace prellocation
  10. 高校学籍管理系统(SQL Server数据库课程设计)
  11. “什么?中东的土豪给我们 App 充了大钱!”
  12. 日语---之百度百科
  13. cp 命令覆盖文件夹和文件
  14. 阿里云-个人建网站从0到精通(二)-快速搭建网站
  15. 衣带渐宽终不悔,为“指针”消得人憔悴(四)
  16. 腾讯大战360之观战指南
  17. 异硫氰酸荧光素标记磁性四氧化三铁纳米粒FITC-Hyd-PEG-Fe3O4|近红外染料CY7.5标记纳米二氧化硅CY7.5-SiO2 NPs
  18. MOSS 2007 入门(3) : 建立一个最精简的母版页
  19. 【Python123】鸡兔同笼
  20. 各种图片格式综述(转载)

热门文章

  1. ruby语言仅仅是昙花一现
  2. linux之pkill命令
  3. java-背包的实现
  4. 关于JS !!flag 语法
  5. IT 人士工作中的十不要!
  6. 1319. 连通网络的操作次数
  7. 2-7 hash(2)
  8. js 台阶有n级_乔欣这是“开眼角”了?只在眼妆中多加这一步,整个人变美了N倍...
  9. java实例_Java线程方式及实例
  10. 【毕业答辩】如何做出90分的毕业答辩PPT?