关于this的认识

this的指向

// 在函数中使用

// function get(val) {

// console.log(val);

// }

// get('你好')

// // 相当于 直接调用函数,函数有this,this是指向window

// get.call(window, '你好')

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

// var person = {

// name: '章三',

// 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() // 222,这相当于fun.call(window), 相当于是直接调用函数,所以this是指向window的

//这里相当于 a.say.call(a), 这里是函数作为对象的方法被调用,遵循谁调用就指向谁,是a对象调用的方法say,所以this指向的是a对象

a.say() // 111

var b = {

name: 333,

say: function(fun) {

fun()

}

}

// 222, 此时这里就是在在执行一个fun()函数,所以就相当于fun.call(window),所以this是指向window的

b.say(a.say)

b.say = a.say

// 经过上面的赋值,对象b相当于下面的形式,所以b.say(),就相当于b.say.call(b),

// 也是遵循函数作为对象的方法被调用的时候,谁调用的就指向谁,所以这里的this是指向b对象的

// var b = {

// name: 333,

// say: function() {

// console.log(this.name)

// }

// }

b.say() // 333

---------------------------------------------------------------------------------------------------------------------------------

箭头函数中this的指向

// 箭头函数中的this是在定义函数的时候绑定的,而不是在函数执行的时候绑定

// 箭头函数中this的指向是固定化的,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致

// 内部的this就是外层代码的this,正是因为它没有this,所以也就不能用作构造函数

// 例子

// var x = 11;

// var obj = {

// x: 22,

// say: () => {

// console.log(this.x);

// }

// }

// // 解释: 所谓的定义时候绑定,就是this是继承自父执行上下文中的this,比如这里的箭头函数中的this.x,箭头函数本身与say平级,

// // 以key:value的形式,也就是箭头函数本身所在的对象为obj,而obj的父执行上下文就是window,因此这里的this.x实际上表示的是window.x,

// // 因此输出的是11

// obj.say() // 11

// 例子2

var num = 150

var obj = {

num: 100,

jisuan: function() {

var fn = () => 200 - this.num

return fn()

}

}

// 解释:此时箭头函数fn本身是在jisuan方法中定义的,所以jisuan方法的父执行上下文是obj,所以箭头函数中的this指向的是obj对象

// 如果将jisuan方法改成箭头函数,那么返回的值就是50

console.log(obj.jisuan()); // 100