我们先构建一个Person的构造函数

function Person(name) {
this.name=name;
}
Person.prototype.sayHi=function () {
console.log(this.name+",您好");
}

然后通过构建Student构造函数演示几种继承方式

1.通过原型链方式进行继承

function Student(age){
this.age=age;
}
Student.prototype.study1=function () {
console.log("我热衷于学习");
}
 Student.prototype=new Person(“张三”);//改变原型指向,指向Person的实例对象的__proto__
Student.prototype.study2=function () {
console.log("我热衷于敲代码");
}

注意:使用此方式进行继承,在Student构造函数中添加原型方法应注意在改变原型指向后添加方法,上述代码中Student实例化后,Student的方式Study1调用失败study2才可调用成功

存在缺点:Person的实例化对象时name属性固定为“张三”,当多次实例化Student对象时,导致继承的name属性一直为“张三”;

2.在构造Student函数中使用call方式进行继承

function  Student(age,name) {
this.age=age;
Person.call(this,name);//通过call方式改变this指向
}
Student.prototype.study=function () {
console.log("学习");
}

存在缺点:此方式在Student实例化对象,可以调用Student原有方法study,但是无法调用Person构造函数中的方法

3.组合继承

function  Student(age,name) {
this.age=age;
Person.call(this,name);//通过call方式改变this指向
}
  Student.prototype=new Person();//改变原型的指向
Student.prototype.study=function () {
console.log("学习");
}

解决了上述两种方式出现的问题

4.拷贝继承

var obj1={
name:"张三",
age:16,
sayHi:function () {
console.log(this.name+",您好");
}
}
var obj2={};
for(var key in obj1){
obj2[key]=obj1[key];
}
console.dir(obj2);
console.dir(obj1);

JavaScript几种继承方式的更多相关文章

  1. JavaScript之四种继承方式讲解

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  2. JavaScript几种继承方式的总结

    1.原型链继承 直接将子类型的原型指向父类型的实例,即"子类型.prototype = new 父类型();",实现方法如下: //父类构造函数 function father(n ...

  3. JavaScript五种继承方式详解

    本文抄袭仅供学习http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html 一. 构造函数绑定 ...

  4. Javascript的四种继承方式

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  5. JavaScript的3种继承方式

    JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承 优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...

  6. JavaScript 的对象继承方式,有几种写法?

    JavaScript 的对象继承方式,有几种写法? 一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Pa ...

  7. 架构师JavaScript 的对象继承方式,有几种程序写法?

    架构师JavaScript 的对象继承方式,有几种程序写法?   一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数, ...

  8. 【设计模式+原型理解】第三章:javascript五种继承父类方式

    [前言] 我们都知道,面向对象(类)的三大特征:封装.继承.多态 继承:子类继承父类的私有属性和公有方法 封装:把相同的代码写在一个函数中 多态: ->重载:JS严格意义上是没有重载,但可以通过 ...

  9. 都0202年了,你还不知道javascript有几种继承方式?

    前言     当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的话,可以通过阅读本文,帮助你更深刻地理解js的所有继承方式.       js ...

随机推荐

  1. PAT 1012 The Best Rank 排序

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...

  2. python进程基础点整理

    操作系统 串行: 一个程序完完整整的执行完再执行下一个 并发: 看起来像是同时运行,其实就是程序间的切换频率比较快,看不出来 并行:真正的同时运行 多道技术 空间复用:共用一个内存条,多个进程相互隔离 ...

  3. Java从入门到精通系统书籍,吐血整理的,只要1元

    思诚为修身之本,而明善又为思诚之本 我会在支付宝联系你 付完款后在支付宝账单详情页 点击联系收款方.我会回复您下载链接.

  4. SSH框架之Hibernate第一篇

    1.2Hibernate的概述: 1.2.1 什么Hibernate? Hibernate(开发源代码的对象关系映射框架)是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它 ...

  5. Servlet、Jsp

    一.Servlet 1.什么是Servlet? (1)由sun公司(被oracle公司收购)制定的一种用来扩展web服务器功能的组件规范.简单的讲就是一种用来开发动态Web的技术. 扩展web服务器功 ...

  6. SQL实用技巧:如何将表中某一列的部分数据合并到一行中

    select *,stuff(select ‘,’ + fieldname from table1 for xml path(”)),1,1,”)  as  field from table2 for ...

  7. [转]Sumifs函数多条件求和的9个实例

    本文转自:http://m.officezhushou.com/sumif/5187.html 第一部分:sumifs函数用法介绍 excel中sumifs函数是Excel2007以后版本新增的多条件 ...

  8. 【bzoj4945】[Noi2017]游戏(搜索+2-sat)

    bzoj 洛谷 题意: 现在有\(a,b,c\)三种车,每个赛道可能会存在限制:\(a\)表示不能选择\(a\)类型的赛车,\(b,c\)同理:\(x\)表示该赛道不受限制,但\(x\)类型的个数$\ ...

  9. 【Java】String的首尾去空和判空

    去除字符串首尾空白字符:包括\t,\r,\n及" ": //去除字符串首尾空白字符:包括\t,\r,\n及" ": System.out.println(&qu ...

  10. WinCC的画面使用技巧

    以下内容以VB脚本为主,仅在VB脚本无法实现的功能中使用C脚本. 画面导航 画面导航的作用是打开起始画面.前一张画面和后一张画面等,只能用C脚本实现. 打开起始画面:    OpenHomePictu ...