js继承方式及特征
1. 原型链继承 (原型链)
function Parent() {
this.fruits = ['apple', 'orange'];
}
Parent.prototype.sayHello = function () {
console.log('Parent');
};
function Child() {}
Child.prototype = new Parent();
let child1 = new Child();
child1.fruits.push('banana');
console.log(child1.fruits); // [ 'apple', 'orange', 'banana' ]
let child2 = new Child();
console.log(child2.fruits); // [ 'apple', 'orange', 'banana' ]
特点:被所有的实例共享了引用类型属性
2. 构造函数方式的继承 (call)
function Parent() {
this.fruits = ['apple', 'orange'];
}
Parent.prototype.sayHello = function () {
console.log('Parent');
};
function Child() {
Parent.call(this);
}
let child1 = new Child();
child1.fruits.push('banana');
console.log(child1.fruits); // [ 'apple', 'orange', 'banana' ]
let child2 = new Child();
console.log(child2.fruits); // [ 'apple', 'orange' ]
特点:
- call方法仅仅调用了父级构造函数的属性及方法(私有属性),没有办法调用父级构造函数原型对象的方法(公有属性)
- 可以在 Child 中向 Parent 传参
- 每次实例化对象都得创建一遍方法,基本无法实现函数复用
3. 组合链继承方式 (原型链 + call)
function Parent(name) {
this.name = name;
this.fruits = ['apple', 'orange'];
}
Parent.prototype.sayHello = function () {
console.log(this.name);
};
function Child(name, age) {
Parent.call(this, name);
this.name = age;
}
Child.prototype = new Parent();
let child1 = new Child();
child1.fruits.push('banana');
console.log(child1.fruits); // [ 'apple', 'orange', 'banana' ]
let child2 = new Child();
console.log(child2.fruits); // [ 'apple', 'orange' ]
特点:
- 子类的私有属性继承了父类私有属性,子类公有属性也继承了父类的私有属性和公有属性
- 父类函数执行了两次
4. 寄生继承 (Object.create 或者是自我实现的Object)
let parent = {
fruits: ['apple', 'orange'],
sayHello: function () {
console.log('hello');
},
};
function parasitic(pro) {
let clone = Object.create(pro);
return clone;
}
let child1 = parasitic(parent);
child1.fruits.push('banana');
console.log(child1.fruits); // [ 'apple', 'orange', 'banana' ]
let child2 = parasitic(parent);
这里用到了Object.create
特点:
- 和原型链继承效果雷同
5. 寄生组合继承(Oject.create + call)
function Parent(name) {
this.name = name;
this.fruits = ['apple','orange']
}
Parent.prototype.sayHello = function () {
console.log(this.name)
}
function Child() {
Parent.call(this)
}
function parasitic(child,parent) {
let tempObj = Object.create(parent.prototype);
child.prototype = tempObj;
tempObj.constructor = child;
}
parasitic(Child, Parent);
特点:
- 子类私有属性继承了父类的私有属性,子类公有属性继承了父类公有属性(和组合继承相比更加纯粹干净)
总结: 所以应用的最多应该就是 组合继承和寄生组合继承两种方式了
js继承方式及特征的更多相关文章
- JS继承方式详解
js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现 ...
- 经典面试题:js继承方式下
上一篇讲解了构造函数的继承方式,今天来讲非构造函数的继承模式. 一.object()方法 json格式的发明人Douglas Crockford,提出了一个object()函数,可以做到这一点. fu ...
- 经典面试题:js继承方式上
js不是传统的面向对象语言,那么他是怎么实现继承的呢?由于js是基于原型链实现的面向对象,所以js主要通过原型链查找来实现继承,主要有两大类实现方式,分为基于构造函数的继承,以及非构造函数的继承. 由 ...
- js继承方式
1.原型链 实现的本质是重写原型对象,代之以一个新类型的实例: 给原型添加方法的代码硬顶放在替换原型的语句之后: 不能使用对象字面量查收能见原型方法,这样会重写原型链. 缺点:包含引用类型值的原型属性 ...
- js继承方式及其优缺点?
原型链继承的缺点一是字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数.借用构造函数(类式继承)借用构造函数虽然解决了刚才两种问题,但没有原型,则复用无从谈起.所以我们需要 ...
- js 中继承方式小谈
题外话 前段时间面试中笔试题有这道题目: 请实现一个继承链,要求如下: 构造函数A():构造函数中有consoleA方法,可以实现console.log("a") 实例对象 a:a ...
- js的三种继承方式及其优缺点
[转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...
- 重新理解JS的6种继承方式
写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这 ...
- js两种定义函数、继承方式及区别
一:js两种定义函数的方式及区别 1:函数声明: function sayA() { alert("i am A"); } 2:函数表达式: var sayB = function ...
随机推荐
- 3、mysql的多实例配置(2)
4.设置mysql多实例启动脚本: (1)3306: [root@backup application]# cat /data/3306/mysql #!/bin/sh . /etc/init.d/f ...
- elk 日志收集 filebeat 集群搭建 php业务服务日志 nginx日志 json 7.12版本 ELK 解决方案
难的不是技术,难的是业务.熟悉业务流程才是最难的. 其实搜索进来的每一个人的需求不一样,希望你能从我的这篇文章里面收获到. 建议还是看官方文档,更全面一些. 一.背景 1,收集nginx acces ...
- 整理!企业选择好用的CRM系统的要点(上)
随着市场经济的发展,对任何行业的企业来说,客户都是非常重要的一个部分.CRM系统帮助企业做到以客户为中心,它可以根据客户的具体要求进行跟进和反馈,在很大程度上提高公司的客户服务水平和客户满意度,进而提 ...
- js--你需要知道的字符串使用方法(含es6及之后)
前言 字符串作为 JavScript 的基本数据类型,在开发以及面试过程中作为程序员对基础掌握情况的重要考点,本文来总结一下字符串的相关属性以及用法.包含了ES6中的一些新语法特性. 正文 1.字符串 ...
- 想用Electron做个小工具?这个或许是终极版
故事背景 之前在网上有看到很多小伙伴基于 electron 实现了非常多好用的桌面端工具,比如图床管理工具 PicGo,就专门做图床工具.也有一些其他的类似的小工具,比如 saladict-deskt ...
- hugegraph 源码解读 —— 索引与查询优化分析
为什么要有索引 gremlin 其实是一个逐级过滤的运行机制,比如下面的一个简单的gremlin查询语句: g.V().hasLabel("label").has("pr ...
- <jsp:param>传递参数,出现乱码问题
今天在学习<jsp:forward>和<jsp:param>时,用<jsp:param>传递参数时,出现乱码问题,部分代码如下: 1 <jsp:forward ...
- hfctfwp(re)
1.easy python revering 看字节码操作,昂哥直接看直接写exp太强了,我就直接手动写了个源码出来(昂哥永远滴神) arr0=[249,91,149,113,16,91,53,41, ...
- C# 8.0和.NET Core 3.0高级编程 分享笔记二:编程基础第一部分
基础部分被我分为了2篇,因为实在太多了,但是每一个知识点我都不舍得删除,所以越写越多,这一篇博客整理了4个夜晚,内容有点多建议慢慢看.本章涵盖以下主题: 介绍C# 理解C#的基础知识 使用变量 处理空 ...
- Python - r'', b'', u'', f'' 的含义
字符串前加 f(重点!敲黑板!) 作用:相当于 format() 函数 name = "帅哥" age = 12 print(f"my name is {name},ag ...