apply、call、bind 实现和this指向问题

  • 如何正确判断 this，箭头函数的 this 是什么？
  • 原则：
    • 1.元素绑定事件，方法中的 this 是元素本身
    • 2.方法名前面是否有点，有的话前面是谁 this 就是谁，没有 this 就是 window ( 严格模式下是 undefined )
    • 3.构造函数执行，方法中的 this 是当前类的一个实例
var fullName = 'language'
var obj = {
    fullName: 'javascript',
    prop: {
        getFullName: function() {
            return this.fullName
        }
    }
}
console.log(obj.prop.getFullName()) // undefined 方法调用前面有点则点前面就是 this => obj.prop => obj.prop.fullName => undefined
var test = obj.prop.getFullName
console.log(test()) // language

var name = 'window'
var Tom = {
    name: 'Tom',
    show: function() {
        console.log(this.name)
    },
    wait: function() {
        var fun = this.show
        fun() // 直接执行，管你在哪呢，this 就是 window
    }
}
Tom.wait() // window
this
  • 对于直接调用的函数来说，不管函数被放在了什么地方，this 一定是 window
    直接调用的形式如下：
// 1. 最普通的函数调用
function fun1() {
    console.log(this) // Window
}
fun1()

// 2. 函数嵌套
function fun1() {
    function fun2() {
        console.log(this) // Window
    }
    fun2()
}
fun1()

// 3. 把函数赋值之后在调用
var a = 1
var obj1 = {
    a: 2,
    fun1: function() {
        console.log(this.a)
    }
}
var fun2 = obj1.fun1
fun2() // 1
// 如果想输出 2 则需要显式的绑定 obj1 如下
fun2.call(obj1) // 2

// 4. 回调函数
var num1 = 1
function fun1(fun) {
    fun()
    console.log(this.num1)
}
fun1(fun2) // 1
function fun2() {
    var num1 = 2
}
// 改写如下：成自执行函数
var num1 = 1
function fun1() {
    (function fun2() {
        var num1 = 2
    })()
    console.log(this.num1)
}
fun1() // 1
// 上述可推理出 setTimeout 这个自执行函数就约等于回调函数，所以他的 this 也是 window 代码如下：
setTimeout(function fun1() {
    console.log(this) // window
    function fun2() {
        console.log(this) // window
    }
    fun2()
}, 0)
  • 对于被调用的函数来说，谁调用了函数，谁就是 this
    方法调用的形式如下：
// 1. 直接调用
var a = 1
var obj1 = {
    a: 2,
    fun1: function() {
        console.log(this.a) // 2
    }
}
obj1.fun1()

// 2. DOM 对象绑定事件调用
// 页面监听 click 事件属于方法调用，this 指向 DOM 源对象
document.addEventListener('click', function(e) {
    console.log(this) // document
    setTimeout(function() {
        console.log(this) // Window
    }, 200)
}, false)
  • 对于 new 的方式来说，this 永远被绑定在了 new 出来的函数上面，不会被任何方式改变
    new 一个新函数时，会创建一个连接到 prototype 成员的新对象，同时 this 会绑定到那个新对象上

构造器调用模式示例如下：

function Person(name, age) {
    this.name = name
    this.age = age
    this.sayName = function () {
        console.log(this.name)
    }
}   
var person1 = new Person('xiaoming', 22)
person1.sayName() // 'xiaoming'
  • 箭头函数是没有 this 的，箭头函数的 this 只取决于包裹箭头函数的第一个普通函数的 this。另外，对于箭头函数使用 bind 这类函数是无效的。
    示例如下：
function test2() {
    return () => {
        return () => {
            console.log(this) 
        }
    }
}
console.log(test2()()()) // Window
  • call apply bind 的作用就是改变 this 的指向即改变上下文的 API，对于这些函数来说 this 取决于第一个参数，如果第一个参数为空，那么就是 window。

多次 bind 实例探究：

let test3 = { }
let fun3 = function () {
    console.log(this)
}
fun3.bind().bind(test3)() // => ?

如上示例 愚钝的笔者是看不出来输出结果的所以我只能用变形的方法来更清楚的看一下执行函数的顺序如下：

let test3 = { }
let fun3 = function () {
    console.log(this)
}
let fun4 = function fun5() {
    return function () {
        return fun3.apply()
    }.apply(test3)
}
fun4()

这样改变就比较清晰的看到不管给函数 bind 几次，fun3 中的 this 永远由第一次 bind 来决定，即为 window。

let test6 = { name: 'test6' }
function fun6() {
    console.log(this.name)
}
fun6.bind(test6)() // test6

如果发生多个规则同时出现，则需要遵循优先级：new 方式优先级最高，bind call apply 其次，接下来是 test1.fun() 调用，最后是直接调用，同时箭头函数的 this 一旦被绑定就不可改变。

this指向流程图.png
call、apply
  • 第一个参数是要绑定给 this 的值，后面传入的是参数列表，当第一个参数为空、null、undefined 的时候，默认指向 window。
obj1.fun1() => obj1.fun1.call(obj1)
fun1() => fun1.call(null)
fun1(fun2) => fun1.call(null, fun2)

Function.prototype.call = function(obj) {
    if(typeof this != 'function') {
        throw Error('this is not a function')
    }
    // 判断第一个参数如果没有则指向 window
    obj = obj || window
    // 取出外层参数 call
    const args1 = Array.prototype.slice.call(arguments, 1)
    // apply const args1 = arguments[1]
    // 将 this 放入到绑定的对象里面
    const fn = Symbol('fn')
    obj[fn] = this
    // 执行保存的函数, 这个时候作用域就是在绑定对象的作用域下执行，改变的this的指向
    const result = obj[fn](...args1)
    // 删除上述绑定的方法
    delete obj[fn]
    return result
}
bind
  • 第一个参数同 call、apply 是要绑定给 this 的值，区别是它的返回值是函数以及 bind 接受的参数列表的使用。
// bind 返回值是函数
var object1 = {
    name: 'bind'
}
function fun1() {
    console.log(this.name)
}
var bind = fun1.bind(object1)
console.log(bind) // ƒ fun1() { console.log(this.name) }
bind() // bind

// 参数的使用
function fun1 (a, b, c) {
    console.log(a, b, c)
}
var fun2 = fun1.bind(null, 'bind')

fun1('1', '2', '3') // 1, 2, 3
fun2('1', '2', '3') // bind, 1, 2 
fun2('2', '3') //bind, 2, 3
fun1.call(null, 'bind') // bind, undefined, undefined

Function.prototype.bind = function(obj) {
    if(typeof this != 'function') {
        throw Error('this is not a function')
    } 
    // 判断第一个参数如果没有则指向 window
    obj = obj || window
    // 缓存 this 出来，防止被改变
    const self = this
    // 取出外层参数
    const args1 = Array.prototype.slice.call(arguments, 1)
    // 返回一个函数 
    const result = function() {
        // 绑定 this 到 obj 上并执行方法，参数进行内外合并
        // return self.apply(obj, args1.concat([...arguments]))
        // 如果函数放在 new 后面进行调用，则需要判断当前 this 是不是属于绑定函数的实例
        return self.apply(this instanceof self ? this : obj, args1.concat([...arguments]))
    }
    // 维护好原型链
    const ret = function() {}
    if(this.prototype) {
        ret.prototype = this.prototype
    }
    // 下行的代码使 result.prototype是 ret 的实例,因此返回的 reslt 若作为 new 的构造函数
    // new 生成的新对象作为 this 传入 result, 新对象的 __proto__ 就是 ret 的实例
    result.prototype = new ret()
    return result
}
应用场景
  • 求数组的最大最小值
var arr = [1, 2, 3, 4, 5]
var max = Math.max.apply(null, arr)
var min = Math.min.apply(null, arr)
console.log(max, ' --- ', min) // 5 " --- " 1
  • 数组追加
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var total = [].push.apply(arr1, arr2);//6
// arr1 [1, 2, 3, 4, 5, 6]
// arr2 [4,5,6]
  • 判断变量类型
function isArray(obj){
    return Object.prototype.toString.call(obj) == '[object Array]';
}
isArray([]) // true
isArray('dot') // false
  • 利用call和apply做继承
function Person(name,age){
    // 这里的this都指向实例
    this.name = name
    this.age = age
    this.sayAge = function(){
        console.log(this.age)
    }
}
function Female(){
    Person.apply(this,arguments)//将父元素所有方法在这里执行一遍就继承了
}
var dot = new Female('Dot',2)
call、apply和bind函数存在的区别: 简单实现请戳这里。。。

bind返回对应函数, 便于稍后调用； apply, call则是立即调用。
除此外, 在 ES6 的箭头函数下, call 和 apply 将失效, 对于箭头函数来说:

  • 箭头函数体内的 this 对象, 就是定义时所在的对象, 而不是使用时所在的对象;所以不需要类似于var _this = this这种丑陋的写法
  • 箭头函数不可以当作构造函数，也就是说不可以使用 new 命令, 否则会抛出一个错误
  • 箭头函数不可以使用 arguments 对象,，该对象在函数体内不存在. 如果要用, 可以用 Rest 参数代替
  • 不可以使用 yield 命令, 因此箭头函数不能用作 Generator 函数，什么是Generator函数可自行查阅资料，推荐阅读阮一峰老师的Generator 函数的含义与用法，Generator 函数的异步应用
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342