我们先构建一个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. spring = servlet + 依赖管理 + 业务逻辑

    spring = servlet + 依赖管理 + 业务逻辑

  2. 【nodejs原理&源码赏析(5)】net模块与通讯的实现

    目录 一. net模块简介 二. Client-Server的通讯 2.1 server的建立 2.2 Socket的建立 三. IPC通讯 四. 撸一个简易的cluster通讯模型 示例代码托管在: ...

  3. DockerFlie的基本命令解析

    DockerFlie官网文档:  https://docs.docker.com/engine/reference/builder/   DockerFile中文: http://www.docker ...

  4. Oracle数据库之第二篇

    /* 多表查询 多个数据库表做连接查询 使用场景: 查询的数据来源为多个表 */ --查询员工信息和员工的部门信息 select * from emp; select * from dept; --使 ...

  5. 关于javascript中变量及函数的提升

    javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中 ...

  6. Linux Shell之监测程序

    监测程序 一.探查进程 当程序运行在系统上时,我们称之为进程(process).想要监测这些进程,需要熟悉ps命令的用法.ps命令好比工具中的瑞士军刀,它能输出运行在系统上的所有程序的许多信息. 但是 ...

  7. Codeforces Round #594 (Div. 2)

    传送门 C. Ivan the Fool and the Probability Theory 题意: 给出一个\(n*m\)的方格,现在要给方格中的元素黑白染色,要求任一颜色最多有一个颜色相同的格子 ...

  8. All 432 functions were compiled because no usable IPDB/IOBJ from previous compilation was found

    解决方法: 将: 链接器——>优化——>链接时间代码生成——>使用快速链接时间代码生成(/LTCG:incremental). 改为: 链接器——>优化——>链接时间代码 ...

  9. SpringCloud学习笔记(二、SpringCloud Config)

    目录: 配置中心简介 SpringCloud Config服务端 SpringCloud Config客户端 动态配置属性bean 一些补充(源码分析):Spring事件监听.健康检查health() ...

  10. 16.输入密码查看 flag

    直接进行burpsuite 的 intruder 爆破模块进行爆破, 得到密码为 13579. 输入进去得到flag