题讲this

发布时间:2022-06-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了题讲this脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

参考 来源:https://www.bilibili.com/video/BV1sN411974w?p=2 细讲:this - JavaScript | MDN (mozilla.org)

1. 知识

谁调用我,我指向谁

在一般函数中:直接使用函数,this指向全局

function get(content) {
    console.log(content)
 }
get('Hello') // Hello
// 上面的写法是下面的语法糖:函数即对象,归属于全局对象window
get.call(window,'Hello') // Hello

函数作为对象属性被调用:对象使用函数,this指向对象

var person ={
    name: 'San',
    run: function (time) {
        console.log(`${this.name} is running,at least ${time}min`)
    }
}
person.run(30) // San is running,at least 30min
// 上面的写法是下面的语法糖:person对象
person.run.call(person,30) // San is running,at least 30min

箭头函数没有自己的this

  • 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
// 1
var x = 11;
var obj = {
    x: 22,
    say: ()=> {
        console.log(this.x) // 箭头函数作用域:obj的对象内;指向上一层:window
    }
}
obj.say();// 11
// 2
var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // 箭头函数作用域:function () {};指向上一层:正确获取到birth
    }
};
obj.getAge();

2. 题目

var name = 222
var a = {
    name: 111,
    say: function () {
        console.log(this.name)
    }
}

var fun = a.say
fun() // 输出1:fun.call(windows),指向window,222
a.say() // 输出2:a.say.call(a),指向a,111

var b = {
    name: 333,
    say: function (fun) {
        fun()
    }
}
b.say(a.say) // 输出3:fun.call(windows),指向window,222
b.say = a.say
/*
var b = {
    name: 333,
    say: function () {
        console.log(this.name)
    }
}
*/
b.say() // 输出4:b.say.call(b)指向b,333

3. 过程

执行见题目注释

4. 答案

222
111
222
333

脚本宝典总结

以上是脚本宝典为你收集整理的题讲this全部内容,希望文章能够帮你解决题讲this所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: