JavaScript几种继承方式
我们先构建一个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几种继承方式的更多相关文章
- JavaScript之四种继承方式讲解
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
- JavaScript几种继承方式的总结
1.原型链继承 直接将子类型的原型指向父类型的实例,即"子类型.prototype = new 父类型();",实现方法如下: //父类构造函数 function father(n ...
- JavaScript五种继承方式详解
本文抄袭仅供学习http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html 一. 构造函数绑定 ...
- Javascript的四种继承方式
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
- JavaScript的3种继承方式
JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承 优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...
- JavaScript 的对象继承方式,有几种写法?
JavaScript 的对象继承方式,有几种写法? 一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Pa ...
- 架构师JavaScript 的对象继承方式,有几种程序写法?
架构师JavaScript 的对象继承方式,有几种程序写法? 一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数, ...
- 【设计模式+原型理解】第三章:javascript五种继承父类方式
[前言] 我们都知道,面向对象(类)的三大特征:封装.继承.多态 继承:子类继承父类的私有属性和公有方法 封装:把相同的代码写在一个函数中 多态: ->重载:JS严格意义上是没有重载,但可以通过 ...
- 都0202年了,你还不知道javascript有几种继承方式?
前言 当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的话,可以通过阅读本文,帮助你更深刻地理解js的所有继承方式. js ...
随机推荐
- SpringBoot无法访问webapp目录下的文件
springboot version:2.1.9-RELEASE 解决方案: 在pom中添加此段 完美解决,代码的作用是让src/main/webapp在编译的时候在resoureces路径下也生成w ...
- 本地SQL Server数据库提示网络问题无法连接
运行程序时发现本地SQLserver数据库无法连接,提示信息为:在与SQL Server 建立连接时出现与网络相关的或特定与实例的错误.未能找到或无法访问服务器.请验证实例名称是否正确并且SQL Se ...
- SSH框架之Hibernate第二篇
1.1 持久化类的编写规则 1.1.1 什么是持久化类? 持久化类 : 与表建立了映射关系的实体类,就可以称之为持久化类. 持久化类 = Java类 + 映射文件. 1.1.2 持久化类的编写规则 ( ...
- IDEA中安装EasyCode插件并连接数据库生成代码
场景 EasyCode是基于IntelliJ IDEA开发的代码生成插件,支持自定义任意模板(Java,html,js,xml).只要是与数据库相关的代码都可以通过自定义模板来生成.支持数据库类型与j ...
- 首个企业架构TOGAF角色扮演案例培训的诞生
BangEA企业架构系列在不同机构做了不少TOGAF认证课,自己都觉得有点枯燥了,我在想我们IT帮2020年第一期的认证课是不是该换种授课方式呢?想到就做......TOGAF认证培训,最早主要就是讲 ...
- socket经典案例-发送数据
一:客户端向服务端发送数据. 服务端: package com.company.s; import java.io.*; import java.net.ServerSocket; import ja ...
- textarea中文本高亮选中
最近在实现原文/译文句段高亮对比显示,和有道翻译类似,如下图所示: 最初的解决方案是采用富文本编辑器,把所有句段信息都用HTML标签包裹,操作空间比较大,页面上需要的功能几乎都可以实现,但是由此带来了 ...
- alluxio 安装记录及相关信息
最近要尝试探究一下alluxio相关的知识,本博客进行对alluxio的安装过程进行备忘: 单例安装过程: https://docs.alluxio.io/os/user/stable/cn/cont ...
- 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 ...
- (办公)访问其他系统接口httpClient,异步访问
访问其他系统接口httpClient,但是都是同步的,同步意味当前线程是阻塞的,只有本次请求完成后才能进行下一次请求;异步意味着所有的请求可以同时塞入缓冲区,不阻塞当前的线程; httpClient请 ...