js中的this机制

js中的this机制

this 既不指向函数自身，也不指函数的词法作用域，this在函数中被调用的时候确定，它的指向完全取决于函数调用的地方，而不是this被声明的地方
(除了箭头函数)：this具体指向什么，取决于你是怎么调用的函数。也就是说谁调用的this，this就指向谁

1. 全局函数中的this

function demo() {
 alert(this); // this -> window
}
demo();

在严格模式下 this为undefined

function demo() {
 'use strict';
 alert(this); // undefined
}
demo();

2. 对象中的方法，该方法被谁调用了，方法中的this就指向谁

let name = 'finget'
let obj = {
 name: 'FinGet',
 getName: function() {
 alert(this.name);
 }
}
obj.getName(); // FinGet


let fn = obj.getName;
fn(); //finget this -> window

3. 元素绑定事件，事件触发后，执行的函数中的this，指向的是当前元素

window.onload = function() {
 let $btn = document.getElementById('btn');
 $btn.onclick = function(){
 alert(this); // this -> 当前触发
 }
}

4. 定时器中的this，指向的是window

setTimeout(function() {
 alert(this); // this -> window ，严格模式 也是指向window
},500)

5. 函数调用的时候，前面加上new关键字

function demo() {
 //alert(this); // this -> object
 this.testStr = 'this is a test';
}
let a = new demo();
alert(a.testStr); // 'this is a test'

6. this指向问题

var a = 1;

function printA() {
 console.log(this.a);
}

var obj = {
 a: 2,
 foo: printA,
 bar: function() {
  printA();
 }
}

obj.foo(); // 2
obj.bar(); // 1
var foo = obj.foo;
foo(); // 1
//this的指向不是函数声明时绑定的，而是在函数运行过程中动态绑定的

function a(num) {
  this.x = num;
  return this;

var x = a(5);
var y = a(6)
console.log(x.x);    //undefined
console.log(y.x);    //6
/*
var x=a(5)
函数内部执行window.x=5
return window
此时window.x=window 而不是5了

var y=a(6)
window.x=6

此时打印x.x 就相当于window.x.x   window.x=6 6是没有x属性的  所以undefined
而y此时等于window  y.x===window.x ==6
*/

// 匿名函数中的this指向全局对象
var a = 2;

var func = {
 a: 4,
 fn: (function() {
  console.log(this); // window
  console.log(this.a); // 2
 })()
}

var x = 20;
var a = {
 x: 15,
 fn: function() {
 var x = 30;
 return function() {
  return this.x
 }
 }
}
console.log((a.fn())());
//()()自治性函数中的this都是window 所以是20
console.log(a.fn()());
//a.fn()执行放回一个方法 然后加个括号返回的方法执行 此时的this是window 20
console.log(a.fn()() == (a.fn())());
//通过上面两个比较式一样的 true
console.log(a.fn().call(this));
//call this指的是window  20
console.log(a.fn().call(a));
//15

this绑定的优先级：优先级：new绑定 > 显示绑定 > 隐式绑定 > 默认绑定
new绑定：函数中有new的调用，this绑定的是新创建的对象
显示绑定：函数中有bind，apply，call调用，this绑定的是指定的对象
隐式绑定：函数中是否在某个上下文对象调用，this绑定的是那个上下文对象
默认绑定：在严格模式下，就绑定到undefined，否则绑定到全局对象