关于this的全面解析（上）

关于this的全面解析（下）页面链接

this的调用位置

调用位置就是函数在代码中被调用的位置（而不是声明的位置），寻找调用位置就是寻找“函数被调用的位置”，最重要的是分析调用栈（就是为了到达当前执行位置所调用的所有函数）。

   function baz() {        //当前调用栈是baz        //当前调用位置是全局位置        console.log('baz');        bar(); //bar        //因此当前的调用位置在baz中        console.log('bar');        foo(); //bar->foo        //因此当前的调用位置在bar中        console.log('foo');    }    baz(); //<-baz的调用位置

把调用栈想象成一个函数调用链，如上图代码中的样式，但是这种方法非常麻烦并且容易出错。另一个查看调用栈的方法是使用浏览器的调试工具。

绑定规则

首先需要找到调用位置，然后判断寻求下列四条规则中的哪一条。

1 默认绑定

首先介绍最常用的函数调用类型：独立函数调用。可以把这条规则看作是无法应用其他规则时的默认规则。

function foo() {        console.log(this.a); //<-this指向全局作用域    }    var a = 2;    foo(); //<-foo调用位置

在代码中，foo()是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，无法应用其他规则。

function foz() {        "use strict";        console.log(this.a); //<--严格模式下不能将全局对象用于绑定    }    foz(); //TypeError

2 隐藏绑定

另一条需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含，这种说法有时候会有误导。

function foa() {        console.log(this.a);    }    var foaObj = {        a: "Hello",        foa: foa //<--foa函数调用位置    }    foaObj.foa();

foa函数在严格意义上来说不属于foaObj对象。然而，调用位置会使用foaObj上下文来引用函数，因此可以判断为函数调用时，foaObj对象包含并引用它。

当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。因此，调用foa函数时this被绑定到foaObj这个对象上，所以this.a 和 foaObj.a 是一样的。

然而，有一个常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑定，从而把this绑定到全局对象或undefined上。

function fob() {        console.log(this.a);    }    var fobObj = {        a: "Hello",        fob: fob    }    var focObj = fobObj.fob;    var a = 1; //a是全局对象的属性    focObj();

focObj引用实际上是fob函数，所以this绑定的是全局对象中的a。

3 显式绑定

就像我们刚才看到的那样，在分析隐式绑定时，我们必须在一个对象内部包含一个指向函数的属性，并通过这个属性间接引用函数，从而把this间接绑定到这个对象上。

JavaScript提供的绝大多数函数以及你自己创建的所有函数都可以使用call(…) 和 apply (…) 方法。

这两个方法的第一参数是一个对象，是给this准备的，接着在调用函数时将其绑定到this。因为你可以直接指定this的绑定对象，因此我们称之为显式绑定。

function fod() {        console.log(this.a);    }    var fodObj = {        a: 2    }    fod.call(fodObj); //2

通过fod.call(…)方法，可以强制把this绑定到fodObj这个对象上。

然而，显示绑定仍然无法解决之前提出的丢失绑定问题。

但是显示绑定的一个变种可以解决这个问题。

 function foh() {        console.log(this.a);    }    var fohObj = {        a: 2    }    var baa = function() {        foh.call(fohObj);    }    baa(); //2    setTimeout(baa, 100); //2    baa.call(window); //2

我们创建了一个baa函数，并在它的内部手动调用了foh.call(fohObj)，因此强制把foh的this绑定到了fohObj上。无论之后如何调用函数baa，它总会手动在fohObj上调用foh。这种绑定是一种显示的强制绑定，因此我们称之为硬绑定。

硬绑定的典型应用场景就是创建一个包裹函数，负责接收参数并返回值。

function foi(something) {        console.log(this.a, something);        return this.a + something;    }    var foiObj = {        a: 2    }    var bae = function() {        return foi.apply(foiObj, arguments);    }    var b = bae(3);    console.log(b);

另一种使用方法是创建一个可以重复使用的辅助函数。

function fol(something) {        console.log(this.a, something);        return this.a + something;    }    function bind(fn, obj) {        return function() {            return fn.apply(obj, arguments);        }    }    var folObj = {        a: 3    }    var bac = bind(fol, folObj);    var c = bac(4);    console.log(c);

4 new绑定

使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

1. 创建（或者说构造）一个全新的对象。
2. 这个新对象会被执行Prototype连接。
3. 这个新对象会绑定到函数调用的this。
4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

function abc(a) {        this.a = a;    }    var x = new abc(10);    console.log(x.a);

关键字：JavaScript

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！