乐趣区

关于javascript:关于this指向的深刻理解以及重写callapplybind

this 指向的问题,因为波及知识点较多,在初学时总是不甚了解。文档看多了反而昏头昏脑,明天重复看了波老师的文档,借此机会写下一些本人的想法,坚固记忆,加深了解。

🍓参考资料:前端根底进阶(七):全方位解读 this

一开始初学时,有一种说法,深得我心:谁调用它,this 就指向谁。

这里的“它”是指函数,谁调用这个函数,这个函数里的 this 就指向谁。

这种说法,不全对,在前期开发的过程中,逐步意识到这样的说法很不负责。

this 指向在什么时候确定的?

首先,第一个问题,this 指向在什么时候确定的?

咱们回顾执行上下文,执行上下文在创立阶段,做了三件事件:

  • 创立变量对象
  • 建设作用域链
  • 确定 this 指向

this 指向是在 执行上下文创立阶段 确定的,那么执行上下文又是在什么时候被创立的?

  • 执行上下文能够简略了解成以后代码的执行环境,它会创立一个作用域;
  • 执行环境分为全局环境、函数环境和 eval(少数时不必,可疏忽);
  • 全局的执行上下文在 script 代码一开始运行时就创立;
  • 函数的执行上下文在 函数被调用时 创立;
当我晓得了“确定 this 指向 -> 执行上下文创立阶段 -> 函数被调用”这一套之后,我尝试着问本人,“调用函数产生了什么?”我没有答上来,我便意识到我还须要粗浅地了解和记忆。

论断:this 指向是在执行上下文创立阶段确定的
大家也能够了解成“this 指向是在函数被调用时确定的”,然而肯定要牢记 调用函数会创立执行上下文,而后才是确定 this 指向

this 到底指向谁呢?

因为 this 指向是在调用函数时确定的,那么一个函数的 this 指向,能够非常灵活。上面的例子,同一个函数,因为调用形式的不同,this 指向了不一样的对象。

var a = 10;
var obj = {a: 20}
function fn() {console.log(this.a);
}
fn(); // 10
fn.call(obj); // 20,应用 call 扭转了 this 指向

除此之外,在函数执行过程中,this 一旦被确定,就不可更改了。

var a = 10;
var obj = {a: 20}
function fn() {
  this = obj; // 这句话试图批改 this,运行后会报错
 console.log(this.a);
}
fn();

一、全局对象中的 this

全局对象的 this,是一个较非凡的存在,指向它自身,也就是指向全局环境。

// 通过 this 绑定到全局对象
this.a2 = 20;
// 通过申明绑定到变量对象,但在全局环境中,变量对象就是它本身
var a1 = 10;
// 仅仅只有赋值操作,标识符会隐式绑定到全局对象
a3 = 30;
// 输入后果会全副合乎预
console.log(a1);
console.log(a2);
console.log(a3);

二、函数中的 this

  • 在一个函数上下文中,this由调用者提供 由调用函数的形式决定
  • 如果调用者函数,被某一对象所领有,那么该函数调用时,外部的 this 指向该对象。
  • 如果函数独立调用,那么该函数外部的 this,指向 undefined。
  • 在非严格模式中,当 this 指向 undefined 时,它会被主动指向全局对象
要精确地确定 this 指向,找到函数的调用者以及辨别他是否是独立调用非常要害。
// 为了可能精确判断,咱们在函数外部应用严格模式,因为非严格模式会主动指向全局
function fn() {
  'use strict';
  console.log(this);
}

fn();  // fn 是调用者,独立调用
window.fn();  // fn 是调用者,被 window 所领有

再来个艰难点的例子:

var a = 20;
var foo = {
  a: 10,
  getA: function () {return this.a;}
}
console.log(foo.getA()); // 10

var test = foo.getA;
console.log(test());  // 20

test()作为调用者,只管它与 foo.getA() 的援用雷同,然而它是独立调用的,因而 this 指向 undefined,在非严格模式下,主动转向全局 window。

var a = 20;
function getA() {return this.a;}
var foo = {
  a: 10,
  getA: getA
}
console.log(foo.getA());  // 10

function foo() {console.log(this.a)
}
function active(fn) {fn(); // 实在调用者,为独立调用
}
var a = 20;
var obj = {
  a: 10,
  getA: foo
}
active(obj.getA);

三、应用 call,apply 显示指定 this

JavaScript 外部提供了一种机制,让咱们能够自行手动设置 this 的指向,就是 callapply

大家在了解 call 和 apply 的时候记住,要了解成 调用一个函数,指定 this 为心愿的对象,而不是让对象调用一个不属于它的办法。

function fn(num1, num2) {console.log(this.a + num1 + num2);
}
var obj = {a: 20}

fn.call(obj, 100, 10); // 130
fn.apply(obj, [20, 10]); // 50

call 与 applay 前面的参数,都是向将要执行的函数传递参数。其中 call 以一个一个的模式传递,apply 以数组的模式传递。这是他们惟一的不同。

四、构造函数中的 this

function Person(name, age) {
    // 这里的 this 指向了谁?
    this.name = name;
    this.age = age;   
}
Person.prototype.getName = function() {
    // 这里的 this 又指向了谁?return this.name;
}

// 下面的 2 个 this,是同一个吗,他们是否指向了原型对象?var p1 = new Person('Nick', 20);
console.log(p1.getName());    // "Nick"

通过 new 操作符调用构造函数时,会经验一下 4 个阶段:

  • 创立一个新的对象;
  • 将构造函数的 this 指向这个新的对象(原构造函数独立调用,外部 this 指向 undefined);
  • 执行构造函数的代码,为这个对象增加属性、办法等;
  • 返回新的对象;

new 操作符调用构造函数时,this 其实指向的是这个新创建的对象,最初又将新的对象返回进去,被示例对象承受。因而咱们能够说,构造函数的 this,指向了新的实例对象

重写 call/apply/bind 办法

call

退出移动版