彻底搞懂js

// 彻底弄懂js里面的this

// *第一种情况*

// 全局作用域或者普通函数中this指向全局对象window

 

// 直接打印

console.log(this) // window

// function 声明函数

function a() {

console.log(this)

}

a(); // window

// function 声明函数然后赋值给变量

b = function bar() {

console.log(this)

}

b() // window

// 自动执行函数

(function () { console.log(htis) })() // window

 

// *第二种情况*

// 方法调用中的this到底指向谁

var person = {

run: function () {

console.log(this)

}

}

 

person.run() // person

 

// 事件绑定

var btn = document.querySelector("button")

btn.onclick = function () {

console.log(this) // btn

}

 

//事件监听

var btn = document.querySelector("button")

btn.addEventListener('click', function () {

console.log(this) // btn

})

 

//jquery的ajax

$.ajax({

self: this, //window

type: "get",

url: url,

async: true,

success: function (res) {

console.log(this) // this指向传入$.ajxa()中的对象

console.log(self) // window

}

});

//这里说明以下，将代码简写为$.ajax（obj） ，this指向obj,在obj中this指向window，因为success方法中，独享obj调用自己，所以this指向obj

 

//第三种 *在构造函数或者构造函数原型对象中this指向构造函数的实例*

 

//不使用new指向window

function Person (name) {

console.log(this) // window

this.name = name;

}

Person('inwe')

 

//使用new

function Person (name) {

this.name = name

console.log(this) //people

self = this

}

var people = new Person('iwen')

console.log(self === people) //true

//这里new改变了this指向，将this由window指向Person的实例对象people

 

// 一针见血式总结:

 

// 普通函数中的this:

 

// 1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj

 

// 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)

 

// 3.在严格模式下,没有直接调用者的函数中的this是 undefined

 

// 4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

 

// 箭头函数中的this

 

// 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

 

var obj = {

say: function () {

setTimeout(function () {

console.log(this)

});

}

}

obj.say(); //window 因为调用的是setTimeout函数 而setTimeout函数是window的一个方法，所以this会指向window

 

// 如果想要在setTimeout/setInterval中使用这个对象的this引用呢?

 

// 用一个 变量提前把正确的 this引用保存 起来, 我们通常使用that = this, 或者 _this = this来保存我们需要的this指针!

var obj = {

func: function() {},

say: function () {

var that = this; //此时的this就是obj对象

setTimeout(function () {

console.log(this)

that.func()

});

}

}

obj.say();

 

// 我们也可以使用 func.bind(this) 给回调函数直接绑定宿主对象, bind绑定宿主对象后依然返回这个函数, 这是更好的做法

var obj = {

func: function() {},

say: function () {

// 此时的this就是obj对象

setTimeout(function () {

console.log(this)

this.func()

}.bind(this));

}

}

obj.say(); // obj

 

// 箭头函数中的this

var obj = {

say: function () {

setTimeout(() => {

console.log(this)

});

}

}

obj.say(); // obj

// 此时的 this继承自obj, 指的是定义它的对象obj, 而不是 window!

 

var obj = {

say: function () {

var f1 = () => {

console.log(this); // obj

setTimeout(() => {

console.log(this); // obj

})

}

f1();

}

}

obj.say()

 

// 因为f1定义时所处的函数 中的 this是指的 obj, setTimeout中的箭头函数this继承自f1, 所以不管有多层嵌套,都是 obj

var obj = {

say: function () {

var f1 = function () {

console.log(this); // window, f1调用时,没有宿主对象,默认是window

setTimeout(() => {

console.log(this); // window

})

};

f1();

}

}

obj.say()

// 结果: 都是 window,因为 箭头函数在定义的时候它所处的环境相当于是window, 所以在箭头函数内部的this函数window

var obj = {

say: function () {

'use strict';

var f1 = function () {

console.log(this); // undefined

setTimeout(() => {

console.log(this); // undefined

})

};

f1();

}

}

obj.say()

// 说明: 严格模式下,没有宿主调用的函数中的this是undefined!!!所以箭头函数中的也是undefined!

 

// 总结:

 

// 使用箭头函数,可以让我们解决一些在匿名函数中 this指向不正确的问题; 但是要注意在和普通函数混合的时候,this的指向可能是window !