写这篇文章是因为最近复习了JavaScript继承相关的知识，结果今天一想差不多把之前复习过的都忘记了（老了，记性越来越差哈哈），所以决定写一篇文章来巩固一下基础知识，也能帮助一些初入前端的同学更好的理解这方面的基础知识。
1.call&apply
在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文context而存在的，换句话说，就是为了改变函数体内部 this 的指向；
JavaScript 的一大特点是，函数存在 定义时上下文 和 运行时上下文以及上下文是可以改变的这样的概念；
像这样，我们先来写一个Dog方法:
function Dog(name){
this.name = name;
}
Dog.prototype.say = function(message){
console.log(this.name + ' say '+ message);
}
let dog = new Dog('小黄');
dog.say('汪汪'); //小黄 say 汪汪
但是我们也有一个Cat方法，也需要Dog方法中的say方法，如果像上面Dog方法一样再写一遍的话真的是太浪费时间了，比如像我这么懒的人绝对不会再写一遍的哈哈，所以这里就要使用Call或者Apply方法来使我们的Cat方法来继承Dog方法；
function Cat(name){
this.name = name;
}
let cat = new Cat('小喵');
//call
dog.say.call(cat, '喵喵'); //小喵 say 喵喵
//apply
dog.say.apply(cat, ['喵喵']); //小喵 say 喵喵
这样的话，Cat方法就继承了Dog方法中的say方法，这样我们就不用在Cat方法中再去写一遍Say方法，是不是方便了很多呢；
所以，可以看出 call 和 apply 是为了动态改变 this 而出现的，当一个对象中没有某个方法，但是其他的对象有这个方法，我们可以借助call或apply用其它对象的方法来操作。
2.call和apply的区别
虽然call和apply的作用一样，都是动态的改变this的指向，但使用时两者还是有一定的区别，这个主要体现在传参方式上:
function fun(arg1, arg2, ...){
// Your code
...
}
fun.call(this, arg1, arg2, ...)
fun.apply(this, [arg1, arg2, ...])
在call方法中，是把参数放进去依次传递，参数可以有多个；在apply方法中，是把参数放在一个数组中传递，所以参数只有两个;
所以当你不知道参数数量时，就使用apply方法，先把参数push进一个数组里，然后再进行传递，当知道参数数量时，用call和apply都可以;
举一个栗子：
let isArray = Object.prototype.toString().call(Obj) == '[object Array]' ? true : false;
写到这里时，突然想到数组有一种伪数组，它具有数组Array的length属性，但没有其它的方法和属性，比如原生js或者jQuery获取的DOM元素，和arguments都属于伪数组，判断方法有很多，网上找有一大堆，这里就不一一列举了，只是想到，就写出来提示一下；
其实还有一种bind方法，我觉我写的话肯定没有这一篇bind方法写的通俗易懂，我这篇文章刚开始也是在这一篇文章里学习的现在贴出链接，万分感谢👌
3.class
在MDN上关于类的定义是：
类实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。
-
类的声明：
class Rectangle { constructor(height, width) { this.height = height; this.width = width; } }注意：函数声明和类声明之间的一个重要区别是函数声明会声明提升，类声明不会。你首先需要声明你的类，然后访问它
-
类表达式
一个类表达式是定义一个类的另一种方式。类表达式可以是被命名的或匿名的。赋予一个命名类表达式的名称是类的主体的本地名称。/* 匿名类 */ let Rectangle = class { constructor(height, width) { this.height = height; this.width = width; } }; /* 命名的类 */ let Rectangle = class Rectangle { constructor(height, width) { this.height = height; this.width = width; } };注意: 类表达式也同样受到类声明中提到的提升问题的困扰。
使用 extends 创建子类
extends
关键字在类声明或类表达式中用于创建一个类作为另一个类的一个子类。
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Dog extends Animal {
speak() {
console.log(this.name + ' barks.');
}
}
var d = new Dog('Mitzie');
// 'Mitzie barks.'
d.speak();
注意：如果子类中存在构造函数，则需要在使用“this”之前首先调用super()。
也可以扩展传统的基于函数的“类”：
function Animal (name) {
this.name = name;
}
Animal.prototype.speak = function () {
console.log(this.name + ' makes a noise.');
}
class Dog extends Animal {
speak() {
super.speak();
console.log(this.name + ' barks.');
}
}
var d = new Dog('Mitzie');
d.speak();
请注意，类不能扩展常规（不可构造/非构造的）对象。如果要继承常规对象，可以改用Object.setPrototypeOf()
var Animal = {
speak() {
console.log(this.name + ' makes a noise.');
}
};
class Dog {
constructor(name) {
this.name = name;
}
speak() {
super.speak();
console.log(this.name + ' barks.');
}
}
Object.setPrototypeOf(Dog.prototype, Animal);
var d = new Dog('Mitzie');
d.speak();
super
关键字用于调用对象的父对象上的函数。
class Cat {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Lion extends Cat {
speak() {
super.speak();
console.log(this.name + ' roars.');
}
}
好啦，该说的差不多都说了，若有遗漏，以后补充~
本文中关于类的介绍详细的可以看MDN：类
网友评论