昼猫笔记 -- 面向对象(II) - 继承
继承
由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。
所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现,还有就是js可以通过构造函数和原型的方式模拟实现类的功能。
另外,js类式继承的实现也是依靠原型链来实现的。
继承方法
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); // 小欣欣
- 原型继承 将父类的私有和共有属性都继承为子类的共有属性
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);
- 冒充对象继承:将父类私有的和共有的都继承为子类私有的
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); //
- 混合继承:私有的继承为私有的,共有的和私有的再次继承为私有的
混合继承是
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); // 欣欣 欣欣私有
- 组合继承:私有的继承为私有的,共有的继承为共有的
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); //
- 中间类继承
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) - 继承的更多相关文章
- 昼猫笔记 JavaScript -- 面向对象(I)
本文内容搬运自公众号 原文链接 本文主要内容:面向对象 预计阅读时间:6分钟 面向对象的方式 单例模式(字面量定义) var obj = {} 类的实例 var obj = new Object() ...
- 昼猫笔记--什么是DOM
昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 Hello,大家好,昼猫,今天来加深下DOM 什么DOM呢?它的全称叫 Document Object Model 通过全称可以知道它是 文 ...
- 昼猫笔记 JavaScript -- 异步执行 | 定时器真的定时执行?
本篇主要内容:异步.定时器引发的思考 预计阅读时间:8分钟 了解 我们都知道在js中定时器有两种 setInterval() . setTimeout() setInterval() :按 ...
- 昼猫笔记 JavaScript -- 作用域技巧!!
简单理解 var zm = function (x) { var code = 'bb' return code }; 学过js的老哥们都知道,当这样简单的一个函数进入浏览器,浏览器开始解释代码,会将 ...
- 昼猫笔记 JavaScript -- 闭包
本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...
- 昼猫笔记 从此告别复杂代码--JavaScript
昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 大家好,我是一只来自喵星的前端初学者,由于我们喵星人科技较为落后,昼猫从今天开始带着使命来到地球学习前端知识. 从今天开始,猫猫我就从Jav ...
- C++ Primer 学习笔记_69_面向对象编程 --继承情况下的类作用域
面向对象编程 --继承情况下的类作用域 引言: 在继承情况下,派生类的作用域嵌套在基类作用域中:假设不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义. 正是这样的类作用域的层次嵌套使 ...
- Java(15)面向对象之继承
作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201615.html 博客主页:https://www.cnblogs.com/testero ...
- 0030 Java学习笔记-面向对象-垃圾回收、(强、软、弱、虚)引用
垃圾回收特点 垃圾:程序运行过程中,会为对象.数组等分配内存,运行过程中或结束后,这些对象可能就没用了,没有变量再指向它们,这时候,它们就成了垃圾,等着垃圾回收程序的回收再利用 Java的垃圾回收机制 ...
随机推荐
- Java数据结构-线性表之单链表LinkedList
线性表的链式存储结构,也称之为链式表,链表:链表的存储单元能够连续也能够不连续. 链表中的节点包括数据域和指针域.数据域为存储数据元素信息的域,指针域为存储直接后继位置(一般称为指针)的域. 注意一个 ...
- 【LeetCode-面试算法经典-Java实现】【064-Minimum Path Sum(最小路径和)】
[064-Minimum Path Sum(最小路径和)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a m x n grid filled with ...
- 如何在阿里云服务器里配置iis 搭建web服务
IIS,互联网信息服务,一种Web服务组件,利用它,我们可以打开asp.php这些搭建网页所用的文件. 工具/原料 域名 服务器 方法/步骤 登录服务器. 点击开始—>服务器 ...
- nyoj--1011--So Easy[II](数学几何水题)
So Easy[II] 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 这是一道基础的计算几何问题(其实这不提示大家也都看的出).问题描述如下: 给你一个N边形.且N边形 ...
- List operations
The + operator concatenates lists: Similarly, the * operator repeats a list a given number of items: ...
- java9新特性-11-String存储结构变更
1. 官方Feature JEP254: Compact Strings 2. 产生背景 Motivation The current implementation of the String cla ...
- 洛谷P4180 [Beijing2010组队]次小生成树Tree
题目描述 小C最近学了很多最小生成树的算法,Prim算法.Kurskal算法.消圈算法等等.正当小C洋洋得意之时,小P又来泼小C冷水了.小P说,让小C求出一个无向图的次小生成树,而且这个次小生成树还得 ...
- ajax+h5实现文件上传,成功即显示缩略图。
官方参考文档: http://fex.baidu.com/webuploader/ 文件下载地址: https://github.com/fex-team/webuploader/releases/d ...
- bzoj1615 麻烦的干草打包机 BFS
Description Farmer John新买的干草打包机的内部结构大概算世界上最混乱的了,它不象普通的机器一样有明确的内部传动装置,而是,N (2 <= N <= 1050)个齿轮互 ...
- POJ2104 K-th Number(整体二分)
题解 又一次做这个题上一次用的是线段树上二分.这次用的是整体二分.结果: (第一个是整体二分) 整体二分就是对于所有查询都二分一个值.然后根据能不能成立把询问修改分成两部分,然后第二部分继承第一部分的 ...