笔记探索js 的this 对象 (第二部分)

Posted 2020-09-05 Stitch晨

了解this 对象之后 我们明白了this 对象就是指向调用函数的作用域
那么接下来我们便要清除函数究竟在哪个作用域调用
找到调用的作用域首先要了解一下几点：

1、调用栈: 调用栈就是一系列的函数,表明当前函数是由哪些上层函数调用的包括它自身，我们关心的调用位置就在当前正在执行的函数的前一个调用中。

 

function baz(){
    //调用栈：baz 函数的内部
            
    console.log("baz 函数内部");
    bar();
}

function bar(){
    //调用栈分别是baz -> bar
    //调用位置为 baz 因此bar 的this指针指向 baz
            
    console.log("bar 函数内部");
    foo();
}

function foo(){
    //调用栈分别为 baz -> bar -> foo
    //调用位置是bar 内部 因此 foo的 this 指针指向了 bar
            
    console.log("foo 函数的内部");
}

baz()//baz的调用位置是 全局作用域

这段代码的意思是，函数再哪个区域被调用 那个区域就是它的执行环境

 

找到了调用位置就要理解一下函数对 this对象的绑定了
一般分为一下4种：

1、默认绑定

指函数在调用的过程中没有任何干涉调用位置的代码 浏览器引擎根据调用栈默认绑定

默认绑定，函数的this 对象会指向了window 对象 而在严格模式下函数访问this 会显示undefined

例子：

function foo(){
    console.log(this.a);
}
var a = "i‘m window";
foo();//输出2 因为全局变量也是window对象的属性

 

2、隐式绑定

函数没有调用任何方法绑定 而是在调用时根据对象上下文绑定了this 的作用域

看一下下面的例子

 

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

var obj = {
    a: "i‘m obj",
    foo: foo //对象obj 中包含着 foo的引用
}

obj.foo();

//通过obj 调用 函数foo，所以foo的this 对象绑定在了 obj上
//严格来说 函数foo 不属于obj对象 但由于函数是通过obj 引用并调用的所以this 指向了obj

 

 

另外对象调用链中只有最靠近被调用函数那层会影响函数的调用位置

即：函数在某一个对象里面 通过那个对象调用函数 this永远指向那个对象

例如：

function bar(){
    console.log(this.a);
}
        
var obj2 = {
    a: "i‘m obj2",
    bar: bar,
}

var obj1 = {
    a: "i‘m obj1",
    obj2: obj2,
    bar: bar
}

obj1.obj2.bar();

这里的意思是：obj1 调用 obj2 然后obj2 再调用 bar这个函数引用

从逻辑上说 bar这个函数调用怎么也是属于 obj2 吧

另外dom 的事件绑定回调函数也会把this 绑定在执行事件的 dom元素对象上

 

小分支：

2.1、隐式丢失

 

隐式绑定的函数会丢失原来的this所引用的对象
丢失后的this 会引用到全局对象或 undefined

例1：
把函数的引用赋值给全局变量 会丢失原来的this 绑定

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

var obj = {
    a: "i‘m obj",
    foo: foo
}

var bar = obj.foo;

//把obj foo属性里面对 foo 函数的引用赋值给了全局变量bar

var a = "global window";
bar();

这里的函数 foo 的引用虽然是obj 里面的一个属性值，但是后面却把函数的引用赋值给了一个全局变量并且在全局环境执行，所以foo 的this 对象指向了window 对象

其实这里真正的误区是我们一直以为在对象字面量中属性值为函数就是函数this 绑定的区域，其实不然

回顾一下第一部分的话，函数在哪里调用，那里才是它this 对象绑定的环境

所以这次函数 foo的引用在（保存在了bar中）在全局调用所以this 指向了全局

 

 

例2:

把函数的引用当作参数传进另外一个函数被执行 会造成隐式丢失

 

 

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

function dofoo(fn){
    fn();
}

var obj = {
    a: "i‘m obj",
    foo: foo
}

var a = "global window";

dofoo(obj.foo);

 

这里 dofoo 的输出结果是  "global window"

 

同时，回调函数也会造成隐式丢失

 

setTimeout(obj.foo,1000);//"global window"

 

3、显式绑定

 

通过语言内置的方法 将函数硬性绑定在了某一对象上执行
例如通过 call()，apply(),bind() 方法
此时函数的this 对象绑定在了bind() 和 apply() 方法的参数上

例如：

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

var obj = {
    a: "i‘m obj",
}

// 把foo函数绑定在obj 上执行

foo.call(obj);//i‘m obj

 

 

3.1、硬绑定

 

通过提供的方法，将函数绑定在某一对象上执行
例：

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

var obj = {
    a: "i‘m obj",
}

setTimeout(function timer(){
    //回调函数通常会丢失this 
    //在回调函数中使用硬性绑定就不会出现这个现状了
            
    foo.call(obj);//把foo 硬性绑定在obj 上执行

},1000);//i‘m obj
        
obj.call(window);//硬性绑定之后 无法再绑定其他对象

apply和call 方法能够执行这种硬性绑定

除了这两个 es5 语法还定义了新方法 bind()

例：

 

function foo(num){
    return this.a + num;
}

var obj = {
    a: 2
}

var bar = foo.bind(obj);//把foo 函数的引用绑定在了 obj上

var result = bar(3);

console.log(result);//5

 

new 绑定：

js 的new 关键字不等同于其他面向对象语言里的new
js 的new 关键字仅仅是调用它的目标函数而已
1、调用new 关键字会创建一个新对象
2、新对象会与函数的原型连接
3、将函数的this 绑定到了新对象上
4、如果函数没有返回指定的新对象 那么就会返回一个默认的对象

例：

function foo(){
    this.a = "who can take me go";
}

var bar = new foo();
console.log(bar.a);

上例中我们通过new 将foo函数实例化 并将this 指针指向了bar
于是bar 便拥有了函数中的 a属性

 

以上四种绑定的优先级

默认绑定最低
隐式绑定低于显示绑定
隐式绑定又低于 new绑定
而new 与显示绑定其实两个本身的并没有什么影响很难说明优先级

如下例：

function foo(arg1){
    this.a = arg1;
}

var obj = {};

var bar = foo.bind(obj);
// 将foo 函数的引用绑定在obj 上
// 然后将obj 上对函数foo 的引用传值给 bar
        
bar(2);
console.log(obj.a);

//现在将引用这 foo.bind(obj)的变量bar 实例化
var baz = new bar(5);
console.log(baz.a);//5
//此操作没有修改obj 的属性a 值，并且把新值添加到了新的对象上 baz

 

 

小结：

这部分内容主要讲述了函数的this绑定位置以及各种的绑定方式，有如下结论

1、当函数被new 实例化时，this 对象指向新返回的对象

2、当函数调用了 call(),apply()或者 bind()，this绑定在指定的对象

3、函数在某个对象字面量里面调用，this绑定在了这个对象字面量里面

4、以上都没有被操作，在非严格模式下函数的this 指向了window对象，严格模式下为undefined