js中this指向

this的指向问题

1.在函数中直接使用this

function a(){
    this.name='jetre';
    console.log(this.name)
  }
  a()
  a.call(window,)
  console.log(window)

普通函数(在全局作用域中定义的)的this指向全局对象window，

因为a(),是一个语法糖，实际是a.call(window)

所以name属性添加到了window对象上.

2.对象中的this(谁调用我，我就指向谁)

//普通情况
var person ={
    name: 'zhangsan',
    run: function(time){
        console.log(`${this.name} 在跑步，跑${time}就不行了`)
    }
}

person.run(30);
实际上是 person.run.call(person,30)

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

var fun =a.say
fun()  //fun.call(window)
a.say() //a.say().call(a)

var b ={
    name: 333,
    
    say: function(fun){
        console.log（this.name）//333 仍相当 b.say().call(b)
        fun()
    }
}

b.say(a.say) //222  注意fun() 相当于 fun().call(window)  作用于仍是window
b.say=a.say  b.say()  //333


let obj ={
  num: 2122,
  fn:function(){
    setTimeout(function(){
      console.log(this.num)
    })

  }
}
obj.fn() //undefied 仍是undefied

3.箭头函数中的this

• 箭头函数中的this是在定义函数时候（js编译）绑定的，而不是在执行函数（js引擎执行代码）时候绑定的。
• 箭头函数中由于没有自己的this，所以它中this是外部代码块的this。正因为它没有this，所以不能用作构造函数。

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

• 所谓的定义时候绑定，就是this是继承自该箭头函数的父执行上下文中的this，比如这里的箭头函数中的this.x，箭头函数自身与say在对象obj里平级，也就是箭头函数本身所在的对象为obj，而obj的父执行上下文就是window，因此这里的this.x实际行指向的就是window.x，因此输出的是11.

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


}
console.log(obj2.getAge()) //31

js 全局作用域下 this是 Window对象（非严格模式）

var name ="我是全局的name"
 var person = {
 	name: "lishi",
 	fn: function() {
 		console.log(this.name)
 	}
 }
person.fn() // "lishi"
const fun = person.fn;
fun() // 我是全局的name
// 因为这时候发生了 “隐式的绑定丢失”，导致fun 函数中的this发生了变化，因为其在全局作用域中，而且不是“严格模式”，所以this指向为window，而非undefined

Class 内部是严格模式

下面代码打印什么？

const obj = {
  name: 'no strict',
  show() {
    console.log(this.name)
  }
}

class Animal {
  constructor() {
    this.name = 'strict'
  }
  show () {
    console.log(this.name)
  }
}

obj.show()
const a = obj.show
a() 

const n = new Animal()
n.show() 
const b = n.show
b()

答案

class Animal 代码块包住的代码是严格模式。从这一点可以看出 ECMA 在推严格模式的决心。既然是严格模式，b() 没有显式传 this，所以报错。

这个问题我答错了，如果当时答对的话，可能会出现另外一个考点：window.name。上面的截图可以看出，window.name 是空字符串，不是 undefined。window.name 默认是空字符串，可读可写， window.name 的值跟着浏览器窗口走的，比如 window.name = ‘test’，地址栏跳转到百度新浪谷歌后，window.name 还是 test。说明主流网站，都没有使用这个属性。

const b = n.show b() ; const fun = person.fn; fun() 统一是把函数赋值后，在全局作用域之行，但是就是因为class 里的代码是开启了“严格模式的”，导致了 b() 函数里的this指向为 “undefined”

js 有严格模式/非严格模式之分

     //"use strict";

vue中常见的函数中this为undefined

我们平常在 vue 的methods对象里的每个函数里打印 this， 发现this总是指向当前 组件对象

methods: {
	say() {
	 function qwe() {
	 	console.log(this)
	 	}
	qwe();
	}
}
在 vue中 this.say(),在say中我们调用了 qwe函数，由于vue默认开启了严格模式，
导致全局作用域 中的 this 为 undefined，所以 qwe打印为undefined.

如何避免undefiend ？
最简单的方法就是使用箭头函数声明 函数，利用箭头函数的作用域是在声明函数是就决定的。

methods: {
	say() {
	 const qwe = () => {
	 	console.log(this)
	 	}
	qwe();
	}
}
//这样打印的this就是 该 vue组件对象，而不是undefined.

react绑定this的5种方法总结

• 默认绑定
• 隐式绑定
• new绑定
• 显式绑定（call apply bind）

绑定优先级 ，参见你不知道javascript一书

js this绑定优先级