我们先构建一个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. SpringBoot无法访问webapp目录下的文件

    springboot version:2.1.9-RELEASE 解决方案: 在pom中添加此段 完美解决,代码的作用是让src/main/webapp在编译的时候在resoureces路径下也生成w ...

  2. 本地SQL Server数据库提示网络问题无法连接

    运行程序时发现本地SQLserver数据库无法连接,提示信息为:在与SQL Server 建立连接时出现与网络相关的或特定与实例的错误.未能找到或无法访问服务器.请验证实例名称是否正确并且SQL Se ...

  3. SSH框架之Hibernate第二篇

    1.1 持久化类的编写规则 1.1.1 什么是持久化类? 持久化类 : 与表建立了映射关系的实体类,就可以称之为持久化类. 持久化类 = Java类 + 映射文件. 1.1.2 持久化类的编写规则 ( ...

  4. IDEA中安装EasyCode插件并连接数据库生成代码

    场景 EasyCode是基于IntelliJ IDEA开发的代码生成插件,支持自定义任意模板(Java,html,js,xml).只要是与数据库相关的代码都可以通过自定义模板来生成.支持数据库类型与j ...

  5. 首个企业架构TOGAF角色扮演案例培训的诞生

    BangEA企业架构系列在不同机构做了不少TOGAF认证课,自己都觉得有点枯燥了,我在想我们IT帮2020年第一期的认证课是不是该换种授课方式呢?想到就做......TOGAF认证培训,最早主要就是讲 ...

  6. socket经典案例-发送数据

    一:客户端向服务端发送数据. 服务端: package com.company.s; import java.io.*; import java.net.ServerSocket; import ja ...

  7. textarea中文本高亮选中

    最近在实现原文/译文句段高亮对比显示,和有道翻译类似,如下图所示: 最初的解决方案是采用富文本编辑器,把所有句段信息都用HTML标签包裹,操作空间比较大,页面上需要的功能几乎都可以实现,但是由此带来了 ...

  8. alluxio 安装记录及相关信息

    最近要尝试探究一下alluxio相关的知识,本博客进行对alluxio的安装过程进行备忘: 单例安装过程: https://docs.alluxio.io/os/user/stable/cn/cont ...

  9. webpack打包 The 'mode' option has not been set, webpack will fallback to

    webpack 打包报错 The 'mode' option has not been set, webpack will fallback to 'production' for,Module no ...

  10. (办公)访问其他系统接口httpClient,异步访问

    访问其他系统接口httpClient,但是都是同步的,同步意味当前线程是阻塞的,只有本次请求完成后才能进行下一次请求;异步意味着所有的请求可以同时塞入缓冲区,不阻塞当前的线程; httpClient请 ...