Js 中的 this

Js 中 this 的理解
 
this 是啥 ?
 
this是 JavaScript 语言的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用; 随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是调用函数的那个对象。

先搞明白一个很重要的概念 —— this的值是在执行的时候才能确认,定义的时候不能确认!为什么呢 —— 因为this是执行上下文环境的一部分,而执行上下文需要在代码执行之前确定,而不是定义的时候。查看执行上下文
 
我的理解:this 总是指向类的当前实例,this不能赋值;也就是说 this 不能脱离 类/对象 ,总结下来,this的指向大致分为4种情况
 
1.纯粹的函数调用,this指向全局对象window.
var x = 1;
function test() {
   console.log(this.x);
}
test();  // 1
2.严格模式下"use strict",指向 undefined.
"use strict";
var x = 1;
function test() {
   console.log(this.x);
}
test();  // undefined
3.对象的方法里调用,this指向调用该方法的对象
function test() {
  console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); // 1
4.构造函数里的this,指向创建出来的实例,这里的 全局 x 始终是 1 ;说明了 this 指向构造函数创建的实例。
var x = 1;
function test() {
 this.x = 2;
}
var obj = new test();
obj.x // 2
x //1
 
那么this的指向能不能更改呢 ?
答案是当然可以的,call / apply / bind ;我们都知道call apply bind都可以改变函数调用this的指向。
call跟apply的用法几乎一样,唯一的不同就是传递的参数不同,call只能一个参数一个参数的传入。
apply则只支持传入一个数组,哪怕是一个参数也要是数组形式。最终调用函数时候这个数组会拆成一个个参数分别传入。

我的理解:a.call(b,arg1,arg2..) 就是a对象的方法应用到b对象上 ; 调用call的对象必须是一个函数对象,因为 call这个方法是在Function的prototype里的,因此 a 对象的共有属性也会应用到 b 对象上;(所谓的继承,apply同理)。我们实践一下:
 
实践一下 call / apply:
var x = 0;
function test() {
 console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
//apply 的方式
obj.m.apply()  // 0
obj.m.apply(obj);  //1
//call 的方式
obj.m.call()  // 0
obj.m.call(obj);  //1
至于bind方法,他是直接改变这个函数的this指向并且返回一个新的函数,之后再次调用这个函数的时候this都是指向bind绑定的第一个参数。
使用:fun.bind(thisFun);
var a = {
    b: function() {
      var func = function() {
        console.log(this.c);
      }
      func.bind(this)();
    },
    c: 'hello'
  }
  a.b(); // hello
  console.log(a.c); // hello
 
posted @ 2018-05-24 12:00  小白~-  阅读(1457)  评论(0编辑  收藏  举报