认识继承
// 构造函数1
function Person(name) {
this.name = name
}
Person.prototype.init = function () {
console.log('我是 Person 原型上的方法')
}
// 构造函数2
function Stu(age) {
this.age = age
}
Stu.prototype.sayHi = function () {
console.log('你好')
}
const s1 = new Stu(18)
console.log(s1)
console.log(s1.__proto__)
* 如果 s1 对象内部 具有一个属性为 name
* 并且 s1 还可以使用 init 方法
*
* 那么 我们就可以说 Stu 这个构造函数 继承自 Person 构造函数
* Stu 是 Person 的子类
* Person 是 Stu 的父类
原型继承
* 利用自定义原形的方式实现继承关系
* 核心: 将子类的原型修改为父类的实例化对象
* 优点: 可以使用父类的属性和方法, 实现了继承
* 缺点: 1. 原本原型上的方法不能使用了 (因为 原型对象被改变了)
* 2. 继承到的属性并不在自己身上, 而是在 原型对象上 (不过不影响使用)
* 缺点1解释:
* sayHi1 是添加到原本原型上的方法, 后续原型被更改后他就不能使用了
* sayHi2 是添加到新的原型上的方法, 这个方法可以正常使用
// 构造函数1
function Person(name) {
this.name = name
}
Person.prototype.init = function () {
console.log('我是 Person 原型上的方法')
}
// 构造函数2
function Stu(age) {
this.age = age
}
// Stu.prototype = {
// a: 1,
// b: 2
// }
Stu.prototype.sayHi1 = function () {
console.log('你好')
}
Stu.prototype = new Person('张三')
Stu.prototype.sayHi2 = function () {
console.log('你好')
}
console.log('Stu 原型对象: ', Stu.prototype)
const s1 = new Stu(18)
console.log('Stu 实例对象: ', s1)
// console.log(s1.name)
// s1.init()
// s1.sayHi()
* 访问 对象 s1 的 name 属性
* 1. 先在对象本身查找, 找到就使用, 但是自身就只有一个 age 属性, 所以没找到
*
* 2. 所以会去自己的 __proto__ 中查找, 也就是 自己构造函数的 原型对象
*
* 2.1 但是现在 自己构造函数的原型对象 已经被我们修改为 Person 这个构造函数的实例化对象
* 2.2 这个实例化对象上是具有 name 属性的, 并且还有一个 init 方法
*
* 3. 所在 实例化对象中找到了 name 属性, 值为: 张三
借用构造函数继承
* 核心: 把父类构造函数当作普通函数调用, 并利用 call 修改这个函数内部的 this 指向
* (如果不修改的话, 函数的 this 指向了其他的对象)
*
* 优点: 把父类的属性全都继承在了自己身上
*
* 缺点: 1. 只能继承父类的属性, 不能继承父类的方法
* 2. 每次调用 Stu 的时候, Stu 内部还会自动调用一次 Person 函数
// 构造函数1
function Person(name) {
this.name = name
}
Person.prototype.init = function () {
console.log('我是 Person 原型上的方法')
}
// 构造函数2
function Stu(age, name) {
// 1. 自动创建出来一个对象 (这个函数内部的 this 就指向了 这个对象, 所以你可以通过 this 向着个对象上添加属性)
// 2. 手动向对象上添加属性
this.age = age
// 将 Person 内部的 this 修改为了 第一步被自动创建出来的对象, 并传递一个参数 name 给 Person 函数使用
Person.call(this, name)
// 3. 自动返回这个对象
}
Stu.prototype.sayHi = function () {
console.log('你好')
}
const s1 = new Stu(18, '张三')
console.log(s1)
// s1.init() // 没有继承到, 所以无法使用
* 分析:
* 35行 通过 new 关键字 调用 Stu 这个构造函数, 得到一个实例化对象, 存储在了 常量 s1 内部
*
* 调用 Stu 函数时 发生的事情
* 1. 给对象上天加一个 age 属性, 并将形参的值 赋值给它
*
* 2. 调用 Person 并通过 call 方法 改变了 这个 Person 这个函数内部的 this 指向
* 2.1 所以现在 Person 函数内部的 this 就相当于是 Stu 构造函数内部被自动创建出来的 对象
*
* 调用 Person 函数是 发生的事情
* this.name = 形参
*
* 3. 代码执行完毕之后, new Stu 时内部被自动创建出来的对象被添加了两个属性
* 3.1 是在 Stu 函数内部添加的 age 属性
* 3.2 是在 Person 函数内部添加的 name 属性
组合继承
* 核心: 把原型继承与借用构造函数继承结合起来使用
*
* 优点: 实例化对象上具有继承到的属性, 并且能够继承到父类原型上的方法
*
* 缺点: 实例化对象上与原型对象上, 都有父类的属性 (多了一套属性, 但是并不影响使用)
// 构造函数1
function Person(name) {
this.name = name
}
Person.prototype.init = function () {
console.log('我是 Person 原型上的方法')
}
// 构造函数2
function Stu(age, name) {
this.age = age
// 1. 借用构造函数继承, 得到 父类的属性 (放在了 对象上, 并且没有继承父类原型上的方法)
Person.call(this, name)
}
// 2. 利用原型继承, 得到父类的属性(原型上)与方法
Stu.prototype = new Person('这个字符串没有意义')
Stu.prototype.sayHi = function () {
console.log('你好')
}
// 创建实例化对象
const s1 = new Stu(18, '张三')
console.log('Stu 实例化对象', s1)
// console.log('Stu 原型对象', Stu.prototype)
// console.log(s1.name)
s1.init()
* 访问 s1 对象的 name 属性
* 1. 去对象自身内部查找, 现在找到了, 直接使用, 并且停止查找
拷贝继承
- 补充: for...in 遍历, 可以遍历到对象的原型上的方法
// 构造函数1
function Person(name) {
this.name = name
}
Person.prototype.init = function () {
console.log('我是 Person 原型上的方法')
}
// const p1 = new Person('张三')
// for (let key in p1) {
// console.log(key, p1[key])
// }
// 构造函数2
function Stu(age, name) {
this.age = age
/**
* 在 子类构造函数实例化父类构造函数, 得到父类构造函数的实例化对象
* 然后利用 for...in 可以遍历到原型上的属性这个特点, 将实例化对象的属性与其原型上的方法
* 一起拷贝到子类构造函数的原型中
*/
const p1 = new Person('张三')
for (let key in p1) {
Stu.prototype[key] = p1[key]
}
}
Stu.prototype.sayHi = function () {
console.log('你好')
}
// 创建实例化对象
const s1 = new Stu(18, '张三')
console.log('Stu 实例化对象', s1)
console.log('Stu 原型对象', s1.__proto__)
ES6 类的继承
* 语法要求:
* 1. 书写子类的时候: class 子类类名 extends 父类类名 {...}
* 2. 书写 constructor 的时候: 内部需要书写 super('父类需要的参数')
*
* 注意:
* 1. extends 和 super 必须同时出现才能完成继承
* 2. super 必须出现在 constructor 的第一行
*
* 额外扩展: ES6 类也能继承 ES5 的构造函数
* 验证方法: 将 Person ES6 类的写法更改为 ES5 的构造函数写法即可
// 父类
class Person {
constructor(name) {
this.name = name
}
init() {
console.log('我是 Person 原型上的方法')
}
}
// 子类
class Stu extends Person {
constructor(age) {
super('父类需要的参数, 都写在这里边')
this.age = age
}
sayHi() {
console.log('你好~~~~')
}
}
const s1 = new Stu(18)
console.log(s1)
console.log(s1.name)
s1.init()
深浅拷贝
* 含义:
* 通常是指将一个引用数据类型, 拷贝到另外一个变量中, 但是根据拷贝的方法不同
* 展示出的效果也有差异
*
* 浅拷贝: 将一份数据拷贝到另外一个变量中, 修改第一层数据是不会互相影响, 但是修改第二层数据时会互相影响
* 深拷贝: 将一份数据拷贝到另外一个变量中, 不管修改那一层数据, 两个对象之间都不会互相影响
// 赋值
let obj = {
name: '张三',
age: 18,
info: {
width: 100,
height: 280
}
}
let obj2 = obj
obj2.age = 20
console.log(obj) // 因为是直接赋值, 所以修改 obj2 会影响 obj, 所以它内部的 name 的值也被更改了 20
// 浅拷贝
let obj = {
name: '张三',
age: 18,
info: {
width: 100,
height: 280
}
}
let newObj = {}
for (let key in obj) {
newObj[key] = obj[key]
}
newObj.age = 99
newObj.info.width = 999
console.log('newObj', newObj)
console.log('obj', obj)
// 深拷贝
let obj = {
name: '张三',
age: 18,
info: {
width: 100,
height: 280
}
}
let newObj = {}
// 针对面试
function deepClone(target, origin) {
/**
* target: 目标对象
* origin: 原始对象
*
* 需求: 将原始对象 origin 内部的所有属性, 拷贝到目标对象 target 中
*/
// 1. 通过 for...in 遍历对象, 拿到对象的所有的 key 与 对应的 value
for (let key in origin) {
// 2. 根据 遍历到的这个属性的属性值是什么类型的, 决定执行什么代码
if (Object.prototype.toString.call(origin[key]) === '[object Object]') {
// 表明当前这个 key 的值为一个对象
target[key] = {}
deepClone(target[key], origin[key])
} else if (Object.prototype.toString.call(origin[key]) === '[object Array]') {
// 表明当前这个 key 的值为一个数组
target[key] = []
deepClone(target[key], origin[key])
} else {
// 表明当前这个 key 的值 一定不是对象或者数组
target[key] = origin[key]
}
}
}
/**
* 分析:
* 调用 deepClone, 第一个参数是一个空对象
* 第二个参数内部有三个属性, 分别为 name-age-info, 其中 info 是一个对象
*
* 函数在执行的时候, 首先会执行一个 for...in 循环遍历 第二个参数
*
* for..in 循环第一次执行 key === 'name' origin[key] === '张三'
* 开始运行 循环内部的 分支语句, 因为当前的 value 类型为 string, 所以会走最后一个 else 分支
* 那么就是: target[key] = origin[key] target.name = '张三'
*
* for...in 循环第二次执行 key === 'age' origin[key] === 18
* 开始运行 循环内不的 分支语句, 因为当前的 value 类型为 number, 所以会走最后一个 else 分支
* 那么就是: target[key] = origin[key] target.age = 18
*
* 两轮循环结束
* 此时 origin 这个对象 {name: '张三', age: 18}
*
* for...in 循环第三次执行 key === 'info' origin[key] === {width: 100, height: 280}
* 开始运行 循环内不的 分支语句, 因为当前的 value 类型为 Object, 所以会走第一个 分支
* 分支内部的代码
* 1. target[key] = {} {name: '张三', age: 18, info: {}}
*
* 2. deepClone(target[key], origin[key])
* 调用 deepClone 第一个参数是一个 空对象
* 第二个参数内部有两个属性, 分别为 width, height
*
* 函数在执行的时候, 首先会执行一个 for...in 循环遍历第二个参数
* for...in 循环第一次执行 key === 'width' origin[key] === 100
* 开始运行 循环内部的 分支语句, 因为当前的 value 类型为 number, 所以会走最后一个 else 分支
* 那么就是: target[key] = origin[key] target.width = 100
*
* for...in 循环第二次执行 key === 'height' origin[key] === 280
* 开始运行 循环内部的 分支语句, 因为当前的 value 类型为 number, 所以会走最后一个 else 分支
* 那么就是: target[key] = origin[key] target.height = 280
* 这两轮 for 执行完毕后 target.info === {width: 100, height: 280}
*/
// deepClone(newObj, obj)
// // newObj.age = 99
// // newObj.info.width = 999
// console.log('newObj', newObj)
// console.log('obj', obj)
// 针对工作
newObj = JSON.parse(JSON.stringify(obj))
newObj.age = 99
newObj.info.width = 999
console.log('newObj', newObj)
console.log('obj', obj)
