继承

由于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. solr环境搭建&基本使用

    分步指南 solr服务与tomcat整合 solr使用配置步骤 solr使用 推荐分词工具 相关的文章 一.Solr服务与tomcat整合 1.solr相关版本下载路径:http://archive. ...

  2. BZOJ5042: LWD的分科岛

    [传送门:BZOJ5042] 简要题意: 给出n个数,q个询问,每个询问输入opt,l,r,如果opt=1,则输出l到r中的最小值,否则输出最大值 题解: 直接上ST表,自信一波,结果 MLE??好吧 ...

  3. 查看spark是否有僵尸进程,有的话,先杀掉。可以使用下面命令

    查看spark是否有僵尸进程,有的话,先杀掉.可以使用下面命令yarn application -listyarn application -kill <jobid>

  4. springboot 测试类,项目使用shiro时报错UnavailableSecurityManagerException

    大概的问题就是,正常运行项目是没有问题的 使用测试类是,加载不了shiro的securityManager,主要导致不是很清楚,望告知, 解决方法 @Resource org.apache.shiro ...

  5. jquery操作select的各种方法

    在工作中,有时候会遇到给select组件添加一些事件,前两天发表了一篇文章,<用jquery给select加选中事件>大致阐述了简单的jq操作select的方法,但是为了详细的介绍一下se ...

  6. shell加法运算及i++

    shell中不支持像普通c语言中的i++操作,默认都是字符串操作,但是通过以下几种方式可以进行变量的自增加 1.linux 用let 表示算术表达式 如下: i=0 let i +=1  或者 let ...

  7. java9新特性-2-安装与官网说明

    1.jdk 9的下载 http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html         下载安 ...

  8. [ xml ] [ log4j2 ] No grammar constraints (DTD or XML Schema) referenced in the document.

    <!DOCTYPE xml> http://rx1226.pixnet.net/blog/post/321584550

  9. iOS网络缓存机制

    iOS的网络引擎自带缓存机制: 网络请求在经过网络引擎时有过处理(添加了字段),所以用api的网络请求无法获取缓存. [NSURLCache sharedURLCache]

  10. Python3基础笔记--基础知识

    目录: 一.变量问题 二.运算符总结 三.字符串问题 四.数据结构 五.文件操作 一.变量问题 变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间.它自始至终都是在内存中活动,只有指明 ...