JavaScript 知识点汇总

170 阅读3分钟

继承

A对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法。

原型链继承

function Parent2 () {
    this.name = '祝敏',
    this.age = 19,
    this.play = [1,2,3]
}
//  一样在父类添加say方法
Parent2.prototype = {
    say () {
        console.log('say bye bye')
    }
}
function Child2 () {
    this.address = '硚口区'
}
// 让子类的原型直接等于父类实例
Child2.prototype = new Parent2()
//  生成两个子类的实例s2、s3
var s2 = new Child2()
var s3 = new Child2()
// s2实例继承了父类中的name属性
console.log(s2.name)  //祝敏
//  s2实例也同样继承了父类原型上的say方法
console.log(s2.say())  //say bye bye
//  给s2实例继承的play属性的数组中push一个新数字
s2.play.push(4)
console.log(s2.play)  //[1, 2, 3, 4]
console.log(s3.play)  //[1, 2, 3, 4]

优点:

  • 简单易于实现,父类的新增的实例与属性子类都能访问 缺点:
  • 可以在子类中增加实例属性,如果要新增加原型属性和方法需要在new 父类构造函数的后面
  • 无法实现多继承
  • 创建子类实例时,不能向父类构造函数中传参数

总结: 借助原型链实现继承虽然解决了父类原型的方法能让子类实例对象继承的问题,但是如果我们通过子类的实例对象修改父类上的属性和方法,那么所有子类的所有实例对象上的属性和方法都会被改变。

借用构造函数继承

//  定义父类
function Parent1 () {
    this.name = '陈楚',
    this.age = 18
}
//  定义子类
function Child1 () {
    //通过call()方法改变Child1的this指向使子类的函数体内执行父级的构造函数从而实现继承效果
    Parent1.call(this)
    this.address = '洪山区'
}
//  构建子类的实例s1
var s1 = new Child1()
console.log(s1.name)  //陈楚
//  父类添加say方法
Parent1.prototype.say = function () {
    console.log('say bye bye')
}
//  子类中直接打印这个say方法
console.log(s1.say())  //报错
优点:
    解决了子类构造函数向父类构造函数中传递参数
    可以实现多继承(call或者apply多个父类)
缺点:
    方法都在构造函数中定义,无法复用
    不能继承原型属性/方法,只能继承父类的实例属性和方法
    

组合继承

function Parent5 () {
    this.name = '许风',
    this.age = 20,
    this.play = [4,5,6]
}
function Child5 () {
    Parent5.call(this)
    this.address = '江夏区'
}
Child5.prototype = Object.create(Parent5.prototype)
Child5.prototype.constructor = Child5
var s9 = new Child5()
var s10 = new Parent5()
console.log(s9.constructor)  //指向构造函数Child5
console.log(s10.constructor)  //指向构造函数Parent5

zhuanlan.zhihu.com/p/37735247

www.jianshu.com/p/3eb7a1843…

浅拷贝和深拷贝

浅拷贝

两个对象第一层的引用不相同就是浅拷贝的含义。

我们可以通过 assign 、扩展运算符等方式来实现浅拷贝:

let a = {
    age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1
b = {...a}
a.age = 3
console.log(b.age) // 2

深拷贝

两个对象内部所有的引用都不相同就是深拷贝的含义。

最简单的深拷贝方式就是使用 JSON.parse(JSON.stringify(object)),但是该方法存在不少缺陷。

比如说只支持 JSON 支持的类型,JSON 是门通用的语言,并不支持 JS 中的所有类型。

闭包及其作用

image.png

image.png

原型

image.png

js循环机制

image.png

JavaScript 是面向对象的吗

JavaScript 的核心是支持面向对象的

var 怎么实现 let 的功能

利用闭包的特性

部分内容引用自 juejin.cn/post/694786…

juejin.cn/post/694786…