继承

由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。

所以,要想实现继承,可以用js的原型prototype机制或者用applycall方法去实现,还有就是js可以通过构造函数和原型的方式模拟实现类的功能。

另外,js类式继承的实现也是依靠原型链来实现的。


继承方法

  1. call继承:子类继承父类,将父类的私有属性继承为子类的私有属性
function Xx() {
this.name = '小欣欣'
};
Xx.prototype.age = 18; function Zm() {
this.name = '昼猫'
Xx.call(this)
};
Zm.prototype.age = 13; var xx = new Xx;
var zm = new Zm;
console.log(zm.name); // 小欣欣

  1. 原型继承 将父类的私有和共有属性都继承为子类的共有属性
function Xx() {
this.name = '小欣欣'
};
Xx.prototype.age = 18; function Zm() {
this.name = '昼猫'
};
Zm.prototype.age = 13; // 父类的实例赋值给子类的原型
Zm.prototype = new Xx var xx = new Xx;
var zm = new Zm;
console.log(zm);

  1. 冒充对象继承:将父类私有的和共有的都继承为子类私有的
function Xx() {
this.name = '欣欣'
}
Xx.prototype.age = 18 function Zm() {
this.name = '昼猫'
var temp = new Xx
for (var key in temp) {
this[key] = temp[key]
}
temp = null;
}
Zm.prototype.age = 13; var xx = new Xx;
var zm = new Zm;
console.log(zm.name, zm.age); // 欣欣 18
console.log(zm.__proto__.age); //

  1. 混合继承:私有的继承为私有的,共有的和私有的再次继承为私有的

混合继承是call 和原型继承的结合
私有的被继承了两次

function Xx() {
this.name = '欣欣'
this.age = '欣欣私有'
}
Xx.prototype.age = 18 function Zm() {
this.name = '昼猫'
this.age = '昼猫私有'
Xx.call(this)
}
Zm.prototype.age = new Xx; var xx = new Xx;
var zm = new Zm;
console.log(zm.name, zm.age); // 欣欣 欣欣私有

  1. 组合继承:私有的继承为私有的,共有的继承为共有的
function Xx() {
this.name = '欣欣'
this.age = '欣欣私有:10'
}
Xx.prototype.age = 18 function Zm() {
this.name = '昼猫'
this.age = '昼猫私有:10'
Xx.call(this)
}
// Zm.prototype.age = 13;
Zm.prototype = Object.create(Xx.prototype)
var xx = new Xx;
var zm = new Zm;
console.log(zm.name, zm.age); // 欣欣 欣欣私有:10
console.log(zm.__proto__.age); //

  1. 中间类继承
function fn() {
console.log(arguments);
arguments.__proto__ = Array.prototype
arguments.shift()
}
fn(1, 2, 3)

arguments 不是一个数组,没有 Array 的自带的方法,可以通过这种方法,将arguments的原型执行 Array 内置类的原型


克隆

var obj = {
name: '小欣欣',
age: 16
}

注意:这种方式不是克隆只是把obj的内存地址 简单的赋值(内存地址)

for in 克隆

注意:不管是共有的还是私有的都将克隆为私有的

var obj = {
name: '昼猫',
age: '12'
}
var obj2 = {}
for (const key in obj) {
obj2[key] = obj[key]
}
console.log(obj2); //{name: '昼猫', age: '12'}

Object.create() JS提供的一种克隆方式,将obj的所有属性克隆到obj2的原型上

var obj = {
name: '小欣欣',
age: 16
}
var obj2 = Object.create(obj)

如果需要添加私有的属性,需要在第二个参数添加 value 值(否则会报错,’不是一个对象‘)

var obj = {
name: '小欣欣',
age: 16
}
var obj2 = Object.create(obj, {name: {value: '昼猫'}})

文章来自 个人公众号 昼猫笔记

昼猫笔记 -- 面向对象(II) - 继承的更多相关文章

  1. 昼猫笔记 JavaScript -- 面向对象(I)

    本文内容搬运自公众号 原文链接 本文主要内容:面向对象 预计阅读时间:6分钟 面向对象的方式 单例模式(字面量定义) var obj = {} 类的实例 var obj = new Object() ...

  2. 昼猫笔记--什么是DOM

    昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 Hello,大家好,昼猫,今天来加深下DOM 什么DOM呢?它的全称叫 Document Object Model 通过全称可以知道它是 文 ...

  3. 昼猫笔记 JavaScript -- 异步执行 | 定时器真的定时执行?

      本篇主要内容:异步.定时器引发的思考 预计阅读时间:8分钟 了解 我们都知道在js中定时器有两种  setInterval()  . setTimeout()   setInterval() :按 ...

  4. 昼猫笔记 JavaScript -- 作用域技巧!!

    简单理解 var zm = function (x) { var code = 'bb' return code }; 学过js的老哥们都知道,当这样简单的一个函数进入浏览器,浏览器开始解释代码,会将 ...

  5. 昼猫笔记 JavaScript -- 闭包

      本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...

  6. 昼猫笔记 从此告别复杂代码--JavaScript

    昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 大家好,我是一只来自喵星的前端初学者,由于我们喵星人科技较为落后,昼猫从今天开始带着使命来到地球学习前端知识. 从今天开始,猫猫我就从Jav ...

  7. C++ Primer 学习笔记_69_面向对象编程 --继承情况下的类作用域

    面向对象编程 --继承情况下的类作用域 引言: 在继承情况下,派生类的作用域嵌套在基类作用域中:假设不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义. 正是这样的类作用域的层次嵌套使 ...

  8. Java(15)面向对象之继承

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201615.html 博客主页:https://www.cnblogs.com/testero ...

  9. 0030 Java学习笔记-面向对象-垃圾回收、(强、软、弱、虚)引用

    垃圾回收特点 垃圾:程序运行过程中,会为对象.数组等分配内存,运行过程中或结束后,这些对象可能就没用了,没有变量再指向它们,这时候,它们就成了垃圾,等着垃圾回收程序的回收再利用 Java的垃圾回收机制 ...

随机推荐

  1. 在oracle中采用connect by prior来实现递归查询

    注明:该文章为引用别人的文章,链接为:http://blog.csdn.net/apicescn/article/details/1510922 , 记录下来只是为了方便查看 原文: connect ...

  2. maven的setting设置

    maven的setting设置,settings.xml文件,多写了几个仓库的地址: <?xml version="1.0" encoding="UTF-8&quo ...

  3. hadoop-05-mysql修改密码

    hadoop-05-mysql修改密码 su root 1,service mysqld start 2,vi /var/log/mysqld.log #在这里面查找密码 3, mysql -uroo ...

  4. [Angular] Configure an Angular App at Runtime

    It always again happens (especially in real world scenarios) that you need to configure your Angular ...

  5. HDOJ 5087 Revenge of LIS II DP

    DP的时候记录下能否够从两个位置转移过来. ... Revenge of LIS II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: ...

  6. poj_2187凸包,暴力解法

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...

  7. 6.deque

    #include <iostream> #include <deque> #include <algorithm> using namespace std; //序 ...

  8. TabLayout禁止选择

    项目中有个页面上面是TabLayout下面是Listview,选择TabLayout的选项卡更新下面Listview里面的数据,在请求的时候想禁用TabLayout选项卡来避免用户频繁点击选项卡造成L ...

  9. 从C到OCblocks语法的声明

           在过去的一段时间,我开始从C的一些简单声明到更复杂的学习直到我开始学习了Objective-C中的blocks.我花了很长的一段时间去理解他并且认识到一旦你理解它是怎样组织的并且是怎样产 ...

  10. $.widget 编写jQueryUI插件(widget)

    转自:MainTao: 编写jQueryUI插件(widget) 使用jQueryUI的widget来写插件,相比于基本的jquery插件有一些好处: * 方便实现继承,代码重用 * 默认是单例 * ...