关于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来调用函数,或者说发生构造函数调用时,会自动执行下面的操作。
- 创建(或者说构造)一个全新的对象。
- 这个新对象会被执行Prototype连接。
- 这个新对象会绑定到函数调用的this。
- 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
function abc(a) { this.a = a; } var x = new abc(10); console.log(x.a);
关键字:JavaScript
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!