-
apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数。
-
apply() 方法向目标函数传递参数时只需将参数数组或 arguments 对象作为方法的第二个参数即可,而 call() 和 bind() 方法则需要将传参逐个列举在方法的一个参数后面。
-
调用 call() 和 apply() 方法时会立即执行目标函数,而 bind() 方法则不会,它将返回一个新函数——目标函数的拷贝,该函数内部的 this 指向 bind() 方法的第一个参数,之后执行新函数相当于执行了目标函数。
-
只有 bind() 方法实现了函数柯里化,因此可以分两次向目标函数传递参数。
============================================================================
call()方法
调用 call() 方法会立即执行目标函数,同时改变函数内部 this 的指向。this 指向由方法的第一个参数决定,后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。
let obj = {
name:“胡歌”,
sum(a, b) {
console.log(this.name)
return a + b
}
}
let obj1 = {
name:“李逍遥”
}
obj.sum.call(obj1, 1, 2) // 李逍遥 3
/* 正常模式 */
obj.sum.call() // window
obj.sum.call(undefined, 1, 2) // window
obj.sum.call(null, 1, 2) // window
/* 严格模式 */
‘use strict’
obj.sum.call() // undefined
obj.sum.call(undefined, 1, 2) // undefined
obj.sum.call(null, 1, 2) // null
手动模拟实现
设计逻辑:
-
myCall() 方法被添加在 Function 原型对象上,目标函数调用该方法时,myCall() 方法内部的 this 将指向目标函数。
-
将目标函数作为 context 对象的方法来执行,由此目标函数内部的 this 将指向 context 对象。
-
从 context 对象中删除目标函数
-
使用扩展运算符 … 处理传入目标函数的参数
Function.prototype.myCall = function (context, …args) {
if (context === undefined || context === null) {
context = window
}
context.fn = this
const result = context.fn(…args)
delete context.fn
return result
}
let obj1 = {
num: 1,
sum(a, b) {
console.log(this)
return this.num + a + b
}
}
let obj2 = {
num: 10
}
console.log(obj1.sum.call(obj2, 2, 3)) // 15
console.log(obj1.sum.myCall(obj2, 2, 3)) // 15
=============================================================================
apply()方法
调用 apply() 方法会立即执行目标函数,同时改变函数内部 this 的指向。this 指向由方法的第一个参数决定,第二个参数是一个参数数组或 arguments 对象,各数组元素或 arguments 对象表示的各参数将作为目标函数的参数一一对应传入。
obj1.sum.apply(obj2, [2, 3])
手动模拟实现
设计逻辑:
-
myApply() 方法被添加在 Function 原型对象上,目标函数调用该方法时,myApply() 方法内部的 this 将指向目标函数。
-
将目标函数作为 context 对象的方法来执行,由此目标函数内部的 this 将指向 context 对象。
-
从 context 对象中删除目标函数
-
使用扩展运算符 … 处理传入目标函数的参数
Function.prototype.myApply = function (context, args) {
if (context === undefined || context === null) {
context = window
}
// 下面这行为核心代码
context.fn = this
const result = context.fn(…args)
delete context.fn
return result
}
console.log(obj1.sum.apply(obj2, [2, 3])) // 15
console.log(obj1.sum.myApply(obj2, [2, 3])) // 15
============================================================================
bind()方法
调用 bind() 方法也会改变函数内部 this 的指向,但是它不是调用函数,而是返回一个新函数——目标函数的拷贝,该函数内部的 this 指向方法的第一个参数,后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。之后执行新函数相当于执行了目标函数。
bind() 方法实现了函数柯里化,因此可以分两次向目标函数传递参数,第一次的参数列举在 bind() 方法首参后面,第二次的参数列举在新函数中。
obj1.sum.bind(obj2, 2)(3)
手动模拟实现
设计逻辑:
-
myBind() 方法被添加在 Function 原型对象上,目标函数调用该方法时,myBind() 方法内部的 this 将指向目标函数。
-
将目标函数作为 context 对象的方法来执行,由此目标函数内部的 this 将指向 context 对象。
-
从 context 对象中删除目标函数
-
使用扩展运算符 … 处理传入目标函数的初始参数、后续参数。
Function.prototype.myBind = function (context, …initArgs) {
if (context === undefined || context === null) {
context = window
}
// 缓存 this 值
const _this = this
return function (…args) {
// 下面这行为核心代码
context.fn = _this
const result = context.fn(…initArgs, …args)
delete context.fn
最后前端到底应该怎么学才好?
如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。
不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。