JS之理解继承
JS之理解继承:https://segmentfault.com/a/1190000010468293
1.
call继承,也叫借用构造函数、伪造对象或是经典继承。call继承回把父类的私有属性和方法继承给子类私有;父类公有属性(原型上的属性)无关。当然这里的call也可以用apply。
//父类F //子类S
function S(){
F.call(this)
}//原理就是改变F中的this指向,指向S的实例,子类会获得父类F的私有属性和方法
2.原型链继承:在
1中通过call继承到了父类的私有属性和私有方法。下一步就是有共有属性和方法。原型链继承把父类私有和公有的属性,都给了子类公有,子类的原型作为父类的实例。原型链继承会使得父类的私有属性在子类的私有和公有都得到继承。
function S(){};
//把子类公有的作为父类的实例;
S.prototype=new F;
let s=new S;
3.冒充继承:通过遍历父类的属性,把父类私有+公有的的属性都给了子类私有。
for in循环,只能遍历自定义的属性和方法;拿不到系统的属性和方法,例如constructor;
function S(){
for(var attr in f){
this[attr]=f[attr];}}
let s=new S;
4.混合继承
1:call继承+原型链继承;子类私有中有父类私有的,子类公有也有父类私有;;
//子类私有继承父类私有;
function S(){ F.call(this)};
//子类公有继承父类私有——公有
S.prototype=new F;
let s=new S;
5.混合继承
2:call继承+拷贝继承(extend),通过extend方法遍历父类原型上的方法,并复制给子类的原型。
//子类私有继承父类私有;
function S(){F.call(this);}
//通过extend方法进行拷贝继承公有
extend(S.prototype, F.prototype);
let s=new S;
//extend方法
function extend(obj2,obj1){
for(var attr in obj1){
obj2[attr]=obj1[attr]}
6.混合继承
3:call继承+Object.create(),这也是ES6里class继承extends的原理,点这。
//子类私有继承父类私有;
function S(){F.call(this)}
S.prototype = Object.create(F.prototype,{constructor:{value:S}})
//Object.create()原理
function Tmp(){};
Tmp.prototype= F.prototype;
S.prototype=new Tmp;
S.prototype.constructor=S;
//*********
let s=new S;
目前比较常用的是混合继承
2和混合继承3,子类能很清晰的继承父类的公有和私有。
JS之理解继承的更多相关文章
- 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...
- [js]js原型链继承小结
这是之前总结的, 发现有很多的毛病,就是重点不突出,重新翻看的时候还是得耗费很长时间去理解这玩意. js中的继承 js中什么是类 1,类是函数数据类型 2.每个类有一个自带prototype属性 pr ...
- js面向对象理解
js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是, ...
- JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...
- 浅谈JS中的继承
前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...
- JS创建对象、继承原型、ES6中class继承
面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...
- js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。
js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...
- js模拟实现继承功能
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js中实现继承的几种方式
首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...
随机推荐
- cursor-spacing 软键盘和input的距离
指定光标与键盘的距离,单位 px .取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离. 例: 软键盘和input的距离300px
- vue3之组件
目录 组件 根组件 局部组件 全局组件 组件的注册 组件名 组件名大小写 全局注册 局部注册 模块系统 组件注册实例: 组件化 组件间数据的传递 父组件传递数据给子组件 父组件传递数据给子组件例子 子 ...
- Raspberry Pi3驱动Oled ssh1106屏
Raspberry Pi3可以直接使用GPIO接口驱动OLED屏 一.接线 根据网上随便找的图可以看到树莓派3的GPIO接口引脚顺序 PS:26pin的GPIO为前26针 根据OLED屏的引脚说明,如 ...
- 【leetcode】1220. Count Vowels Permutation
题目如下: Given an integer n, your task is to count how many strings of length n can be formed under the ...
- OpenQA.Selenium.Chrome Action滑动操作
//[定位] //滑块元素 var wrapper = driver.FindElement(By.XPath("/html/body/div/div[1]/div[1]/div[2]&qu ...
- Leaflet调用geoserver发布的矢量切片
geoserver如何发布切片就不写了,大家都可以查到. index.html <!DOCTYPE html> <html> <head> <meta cha ...
- sqljob
http://blog.csdn.net/sinat_16998945/article/details/52586687
- Spring Boot 的各种start
新建一个springBoot项目时,你会选择很多依赖,在项目中的build.gradle中你会看见各种start,例如下边的代码: 今天就在这里列举一下各种start: 1.spring-boot-s ...
- [luogu]P3959 宝藏[NOIP][状态压缩DP]
[luogu]P3959 宝藏[TREASURE] 题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 n 个深埋在地下的宝藏屋, 也给出了这 n 个宝藏屋之间可供开发的 m 条道路和它们的 ...
- SpringCloud 入门知识篇
SpringCloud 入门 springcloud 学习 7天学会springcloud 教程 https://www.cnblogs.com/skyblog/category/738524.htm ...