在js开发中的this指向详解

1、this的作用

在没有this指向，也是有解决方案的

var obj = {
	name: chen,
	eating: function(){
		console.log(obj.name + '在吃东西'
	}
}
var obj1 = {
	name: chen,
	eating: function(){
		console.log(obj1.name + '在吃东西'
	}
}

//如果对象名称改了，我们需要改很多的地方， 不是很方便
obj.eating();
obj1.eating();

2、this全局作用域下的指向

//在大多数情况下，this都是出现在函数中
// 在全局作用域下，浏览器中this指向window，
//而node环境下，指向{},因为node下，js会被当成一个module，加载-> 编译->放到一个函数中->执行这个函数.apply({})
console.log(this)

3、同一函数的this的不同

// this指向什么， 跟函数所处的位置是没有关系的， 跟函数被调用的方式有关系

function foo() {
  console.log(this);
}

// 1.直接调用这个函数
foo();

//2.创建一个对象，对象中的函数指向foo
var obj = {
  name: "chen",
  foo: foo,
};
obj.foo();

//3. apply调用
foo.apply("abc");

注意： this是在运行的时候被绑定的

• 绑定规则1：默认绑定
• 绑定规则2：隐式绑定
• 绑定规则3：显示绑定
• 绑定规则4：new绑定

3.1、默认绑定

//默认绑定：独立函数调用

//默认绑定：独立函数调用
// 案例1
// function foo() {
//   console.log(this); //window
// }

// foo();

//案例2
// function foo1() {
//   console.log(this); //window
// }
// function foo2() {
//   console.log(this); //window
//   foo1();
// }
// function foo3() {
//   console.log(this); //window
//   foo2();
// }

// foo3();

// 案例3
// var obj = {
//   name: "chen",
//   foo: function () {
//     console.log(this);
//   },
// };
// var bar = obj.foo;
// bar(); // window


// 案例4
function foo(){
  function bar(){
    console.log(this);
  }
  return bar;
}
var fn = foo();
fn()// window
注：只要是独立函数调用，那它就是window

3.2、隐式绑定

就是通过某个对象进行调用： obj对象会被js引擎绑定到fn函数的this里面

// 案例1
// function foo() {
//   console.log(this);
// }

// var obj = {
//   name: "chen",
//   foo: foo,
// };
// obj.foo(); //obj对象， js引擎执行上下文绑定的时候会把obj绑定到this上

// 案例2
var obj1 = {
  name: "obj1",
  foo: function () {
    console.log(this); // obj2
  },
};

var obj2 = {
  name: "obj2",
  bar: obj1.foo,
};
obj2.bar(); // obj2

3.3、显式绑定

call、apply、bind：改变this指向

function foo() {
  console.log(this);
}

// foo.call('aaaa')
// foo.call('aaaa')
// foo.call('aaaa')
// foo.call('aaaa')

// bind其实跟call、apply一样的，只不过他会生成一个新函数
//默认绑定和显示绑定bind冲突： 优先级（显示绑定）
var newFoo = foo.bind("aaaa");
newFoo(); //独立函数调用 但是打印出来的是aaaa

3.4、new绑定

// 我们通过一个new关键字调用一个函数时（构造器）,这个时候this是在调用这个构造器是创建出来的对象
// this = 创建出来的对象， 这个过程就是new绑定

// function Person(){
//   return this
// }

// var p = new Person()

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var p1 = new Person("chen", 32);
console.log(p1.name, p1.age);

4、this的一些其他补充

• setTimeout
• forEach、map、find等
• 监听点击

5、四个绑定的优先级

• 默认绑定的优先级最低
• 显示绑定的优先级 高于 隐式绑定
• new绑定优先级高于 隐式绑定

5.1、默认绑定的优先级最低

var obj = {
  name: "chen",
  foo: function () {
    console.log(this);
  },
};

// obj.foo();
// 隐式绑定跟显示绑定，显示绑定优先级比较高，打印abc sting对象
obj.foo.call("abc");

5.2、new高于隐式绑定

var obj = {
  name: "chen",
  foo: function () {
    console.log(this);
  },
};

var f = new obj.foo(); //foo {}

5.3、new高于显示绑定

//结论： new关键字不能跟apply、call一起使用

function foo() {
  console.log(this);
}

var bar = foo.bind("aaaa");

var obj = new bar();  //foo {}

5.4、忽略显示绑定

1、特殊绑定

foo.apply(null)
foo.apply(undefined)

var bar = foo.bind(null)
bar()

2、箭头函数的使用
// 1、箭头函数的编写
() => {};

var foo = () => {};
var foo = function () {};

对于上的四种this规则，对箭头函数都不适用

6、箭头函数中的this

6.1、this绑定

var name = "chen";

var foo = () => {
  console.log(this);
};

foo();//window

var obj = { foo: foo }; 
obj.foo(); //window

foo.call("abc"); //window

6.2、this面试题