(八) 简单理解js中的this指向

2021-07-26 14:35:01 阅读：146 来源： 互联网

标签：function obj 函数指向 js fun say 理解 var

this指向问题

this的行为有时候会显得极其诡异，让人感到困惑，但只需要记住 this的值要等到代码真正执行时才能确定
同时this的值具体有以下几种情况：

new 调用时指的是被构造的对象
call、apply调用，指向我们指定的对象
对象调用，如执行obj.b()，this指向obj
默认的，例如fun(), 指向全局变量window(相当于执行window.fun())

在函数中直接使用

function get(content) {
  console.log(content)
}

get('你好')
// 上面是下面的语法糖
get.call(window, '你好')

函数作为对象的方法被调用 (谁调用,指向谁)

var Person = {
  name: '张三',
  run: function(time){
    console.log(`${this.name} 在跑步,最多${time}min就不行了`)
  }
}

Person.run(30)
Person.run.call(Person,30)

将函数方法赋值给外部变量

var obj = { a: 1, b: function () { alert(this.a) } };
var fun = obj.b;				// 引用赋值
fun();

笔试题

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

var fun = a.say
fun()           // 222
a.say()         // 111

var b = {
  name: 333,
  say: function(fun) {
    fun()
  }
}

b.say(a.say)        // 222
b.say = a.say      
b.say()             // 333

箭头函数中的this指向问题

箭头函数中的this是在定义函数的时候绑定, 而不是在执行函数的时候绑定
实际上, 箭头函数根本没有自己的this, 导致内部的this就是外层代码块的this, 所谓的外层代码块, 是指继承自父执行上下文的this
正因为它没有this, 所以也就不能作为构造函数

    var x = 11
    var obj = {
      x: 22,
      say: () => {
        console.log(this.x)
      }
    }
    obj.say()     // 11

本案例中, 箭头函数与say平级, 也就是箭头函数所在的对象为obj, 而obj的父执行上下文是window

    var obj = {
      birth: 1990,
      getAge: function() {
        var b = this.birth
        var fn = () => new Date().getFullYear() - this.birth
        return fn
      }
    }
    obj.getAge()    //

例子中箭头函数时在getAge中定义的, getAge的父执行上下文是obj, 因此这里的this指向obj对象

forEach中的this问题

    var obj = {
      items: [1, 2, 3],
      print: function () {
        console.log(this);				// obj

        this.items.forEach(function (item) {
          console.log(this);			// window
        })
      }
    }
    obj.print()

标签：function,obj,函数,指向,js,fun,say,理解,var
来源： https://www.cnblogs.com/zhimao/p/15061216.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9