apply和call详解与使用

apply()与call() 详解

每个函数都包含的两个非继承而来的方法：apply()和call()。然而这俩方法萌芽总是忘记所以今天打算深入的去学习一下借此加深记忆！这俩方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内的this对象的值。

apply()

apply()方法接受两个参数，第一个是在其中运行函数的作用域，另一个是参数数组。其中第二个参数可以是Array的实例，也可以是argument对象，举个栗子：

function sum(num1, num2) {
    return num1 + num2
}
function callSum1(num1, num2) {
    return sum.apply(this, [num1, num2])
}
function callSum2() {
    return sum.apply(this,arguments)
}

console.log(callSum2(1, 2))//结果为3

call()

call和apply一样第一个是运行函数的作用域，要注意的是其他的参数call必须明确定好每个值，只能一个一个传参，结果上来看两者其实是一样的！

function sum(num1, num2) {
    return num1 + num2
}
function callSum1(num1, num2) {
    return sum.call(this, num1, num2)
}
//如果直接给arguments会出错所以必须将值从数组内一个个抠出来。
function callSum2() {
    return sum.call(this,...arguments)
}

console.log(callSum2(1, 2))//结果为3

两者的区别

可以从属性值看出apply更适合传递一组参数（数组或者arguments对象）而call则是拆开了一个一个的传，两种方法的作用其实是相同的，他们的区别仅在于接受参数的方式不同！

简单来讲就是这样：

//apply()方法
function.apply(this,[num1,num2,num3])

//call()方法
function.call(this,num1,num2,num3);

继承 - 对象冒充

在我们学习继承的时候其中一种办法就是利用apply或者call进行对象冒充，对象冒充可以继承构造函数里面的属性和方法，但是无法继承原型链上面的属性与方法！

function Person() {
    this.name = '张三'
    this.age = 18
}
Person.prototype.introduce = function () {
    return `我叫${this.name}，今年${this.age}岁`
}

const person = new Person();
console.log(person.name)//张三
console.log(person.introduce())//我叫张三，今年18岁

/*  对象冒充    */
function Robot(){
    Person.call(this)
}
const robot = new Robot();
console.log(robot.name)//张三
console.log(robot.introduce())//robot.introduce is not a function

继承 - 原型链 + 对象冒充 

通过这种方式既可以继承原型链上的属性与方法又能继承来自构造函数当中的属性并且能够传递参数，非常推荐！

/**
 * 原型链 + 对象冒充 实现es5继承
 * @param {*} name 姓名
 * @param {*} age 年龄
 */
function Person(name,age) {
    this.name = name
    this.age = age
}
Person.prototype.introduce = function () {
    return `我叫${this.name}，今年${this.age}岁`
}

const person = new Person('小明',21);
console.log(person.name)//小明
console.log(person.introduce())//我叫小明，今年21岁

/*  对象冒充    */
function Robot(name,age){
    Person.call(this,name,age)
}
Robot.prototype = Person.prototype;
const robot = new Robot('机器人',1);
console.log(robot.name)//机器人
console.log(robot.introduce())//我叫机器人，今年1岁

附加

mac的话按住command（Windows应该是alt，不是的话就是ctrl）点击方法可以查看他的详情，为什么萌芽这里是TS语法啊你们都是么？谁来告诉一下萌芽为什么就这样啦？？？不过还好萌芽今天刚把js学完改天整理出笔记跟大家分享！

TypeScript总结笔记： https://blog.csdn.net/Meng_ya_zi/article/details/103660938