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.混合继承1call继承+原型链继承;子类私有中有父类私有的,子类公有也有父类私有;;

 //子类私有继承父类私有;
function S(){ F.call(this)}; //子类公有继承父类私有——公有
S.prototype=new F;
let s=new S;

5.混合继承2call继承+拷贝继承(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.混合继承3call继承+Object.create(),这也是ES6class继承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之理解继承的更多相关文章

  1. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  2. [js]js原型链继承小结

    这是之前总结的, 发现有很多的毛病,就是重点不突出,重新翻看的时候还是得耗费很长时间去理解这玩意. js中的继承 js中什么是类 1,类是函数数据类型 2.每个类有一个自带prototype属性 pr ...

  3. js面向对象理解

    js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是, ...

  4. JS中的继承(上)

    JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...

  5. 浅谈JS中的继承

    前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...

  6. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...

  7. js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。

    js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...

  8. js模拟实现继承功能

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. js中实现继承的几种方式

    首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...

随机推荐

  1. cursor-spacing 软键盘和input的距离

    指定光标与键盘的距离,单位 px .取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离. 例: 软键盘和input的距离300px

  2. vue3之组件

    目录 组件 根组件 局部组件 全局组件 组件的注册 组件名 组件名大小写 全局注册 局部注册 模块系统 组件注册实例: 组件化 组件间数据的传递 父组件传递数据给子组件 父组件传递数据给子组件例子 子 ...

  3. Raspberry Pi3驱动Oled ssh1106屏

    Raspberry Pi3可以直接使用GPIO接口驱动OLED屏 一.接线 根据网上随便找的图可以看到树莓派3的GPIO接口引脚顺序 PS:26pin的GPIO为前26针 根据OLED屏的引脚说明,如 ...

  4. 【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 ...

  5. OpenQA.Selenium.Chrome Action滑动操作

    //[定位] //滑块元素 var wrapper = driver.FindElement(By.XPath("/html/body/div/div[1]/div[1]/div[2]&qu ...

  6. Leaflet调用geoserver发布的矢量切片

    geoserver如何发布切片就不写了,大家都可以查到. index.html <!DOCTYPE html> <html> <head> <meta cha ...

  7. sqljob

    http://blog.csdn.net/sinat_16998945/article/details/52586687

  8. Spring Boot 的各种start

    新建一个springBoot项目时,你会选择很多依赖,在项目中的build.gradle中你会看见各种start,例如下边的代码: 今天就在这里列举一下各种start: 1.spring-boot-s ...

  9. [luogu]P3959 宝藏[NOIP][状态压缩DP]

    [luogu]P3959 宝藏[TREASURE] 题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 n 个深埋在地下的宝藏屋, 也给出了这 n 个宝藏屋之间可供开发的 m 条道路和它们的 ...

  10. SpringCloud 入门知识篇

    SpringCloud 入门 springcloud 学习 7天学会springcloud 教程 https://www.cnblogs.com/skyblog/category/738524.htm ...