javaScript-继承2种方式
1、组合继承
组合继承带来的问题很明细就是父类的构造函数会调用两次,如:
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.color=["red","blue","green"]; }
Person.prototype.sayHello=function(){ console.log("hello word!")}; function Man(name,age,sex,job){
Person.call(this,name,age,sex);// 第二次
this.job=job;
}
Man.prototype=new Person();//第一次
var instance=new Man("张三",20,"男","农民");
instance.color.push("black");
console.log(instance.color);//["red", "blue", "green", "black"]
console.log(instance.job);//农民
console.log(instance.sayHello);//hello word! var instance2=new Man("张三",20,"男","地主");
console.log(instance2.color); //["red", "blue", "green"]
console.log(instance2.job);//地主
console.log(instance2.sayHello);//hello word!
2、寄生组合式继承
js中继承的本质是对象的内部属性_proto_ 指向原型对象,那么解决组合继承的问题其实很简单,我们只要克隆一个父类的原型对象来代替这句代码
Man.prototype=new Person();
那理论是不是也是可以的呢?
继续看代码:
//寄生组合式继承
function inheritPrototype(child,parent){
var prototype=Object(parent.prototype);// 第一步:创建一个变量接收父类原型对象
prototype.constructor=child;// 第二步:原型对象构造指向子类
child.prototype=prototype;// 第三步:用父类副本的原型对象重写子类原型对象
} //基类
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.color=["red","blue","green"];
}
Person.prototype.sayHello=function(){ console.log("hello word!")}; //子类
function Man(name,age,sex,job){
Person.call(this,name,age,sex);//继承属性
this.job=job;
} inheritPrototype(Man,Person);// 继承原型方法 var instance=new Man("张三",20,"男","农民");
instance.color.push("black");// 数组添加一个元素
console.log(instance.color);//["red", "blue", "green", "black"]
console.log(instance.job);//农民
console.log(instance.sayHello);//hello word! var instance2=new Man("张三",20,"男","地主");
console.log(instance2.color); //["red", "blue", "green"]
console.log(instance2.job);//地主
console.log(instance2.sayHello);//hello word!
事实证明这样处理是可以的。寄生组合式继承只调用一次Person 构造函数,与此同时还原型链还能保持不变;普遍认为这是最理想的继承模式了;
javaScript-继承2种方式的更多相关文章
- VS Code - Debugger for Chrome调试JavaScript的两种方式
VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...
- 原生JavaScript支持6种方式获取元素
一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...
- javascript实现继承3种方式: 原型继承、借用构造函数继承、组合继承,模拟extends方法继承
javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...
- 转载Javascript继承两种形式详解
一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下Js的继承机制,在网上也看了一些前辈们博客里的总结,感觉分析不是特别全面.这里仅仅是把自己的学习体会拿出来分 ...
- 转载 Javascript继承两种形式详解
一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下Js的继承机制,在网上也看了一些前辈们博客里的总结,感觉分析不是特别全面.这里仅仅是把自己的学习体会拿出来分 ...
- 让浏览器非阻塞加载javascript的几种方式
通常大多数浏览器是并行下载资源的,但由于外部脚本的特殊性例如通过脚本改变文档的DOM结构.脚本之间的存在依赖关系.使用document.write 向页面输出HTML等.浏览器为了确保正确执行脚本和呈 ...
- JavaScript 用七种方式教你判断一个变量是否为数组类型
JavaScript 如何判断一个变量是否为数组类型 引言 正文 方法一 方法二 方法三 方法四 方法五 方法六 方法七 结束语 引言 我们如何判断一个变量是否为数组类型呢? 今天来给大家介绍七种方式 ...
- JavaScript 继承——三种继承方法及其优劣
原文地址 本文内容 目的 继承的第一步--最简单的继承 私有变量/成员和原型 三种继承方式及其优劣 基本的原型继承 Yahoo JavaScript 模块模式 创建闭包的构造函数 三种方法的代码执 ...
- js原生继承几种方式
js原生继承 js本身并没有继承和类的概念,本质上是通过原型链(prototype)的形式实现的. 1.先写两个构造函数Parent和Child,用于将Child继承Parent function P ...
- javascript实例:两种方式实现tab栏选项卡
方法1: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
随机推荐
- 【bzoj3730】震波 动态点分治+线段树
题目描述 在一片土地上有N个城市,通过N-1条无向边互相连接,形成一棵树的结构,相邻两个城市的距离为1,其中第i个城市的价值为value[i].不幸的是,这片土地常常发生地震,并且随着时代的发展,城市 ...
- android面试(2)----组件
1.anroid:id的作用? android:id是作为控件的唯一标示符.可以使用与releativelayout中,也可以再Activity中通过findviewbyid来获得指定的控件. 2.a ...
- 深入理解JVM一java堆分析
上一节介绍了针对JVM的监控工具,包括JPS可以查看当前所有的java进程,jstack查看线程栈可以帮助你分析是否有死锁等情况,jmap可以导出java堆文件在MAT工具上进行分析等等.这些工具都非 ...
- [洛谷P5147]随机数生成器
题目大意:$$f_n=\begin{cases}\frac{\sum\limits_{i=1}^nf_i}n+1&(n>1)\\0&(n=1)\end{cases}$$求$f_n ...
- Java操作excel(POI)
由于在项目中使用了将excel数据导入到数据库.在这里分享一下. 这里使用的POI方式,支持两种格式(xls,xlsx) package com.entity; import java.io.File ...
- 硬盘杀手!Windows版Redis疯狂占用C盘空间【转】
[问题的原因] Windows版Redis启动后,会在C盘自动创建一个很大的文件,C:\Users\{你的用户名}\AppData\Local\Redis\RedisQFolk_****.dat 我们 ...
- mac Source Tree免登陆方法
打开SourceTree -> 点击菜单栏的 窗口 选项 -> 点击显示托管在远端的仓库 -> 点击登录注册页面右上角的关闭按钮 -> 点击Quit -> 点击确定关闭刷 ...
- bzoj1912【Apio2010】patrol 巡逻
题解: 显然需要分类讨论了,首先理解k==0即原图时按照dfs序来说 , 每条边至少走两次: k==1,相当于可以省去dfs回溯时第二次走过某条路径的浪费,所以答案是k==0的答案-直径 : k==2 ...
- jsp 的 4 种基本语法
1.JSP 注释 2.JSP 声明 3.JSP 表达式 4.JSP 脚本 JSP 注释: 注释格式: <%-- 注释内容 --%> 需要注意的是,JSP 的注释不会输出到 HTML 中. ...
- SpringBoot项目中使用swagger2暴露resftul接口增加JWT来进行安全性验证
首先推荐两篇文章: 关于保护RestAPI的一些介绍: http://www.jianshu.com/p/6307c89fe3fa token与session的一些区别漫谈: http://www.j ...