this 相关

对于前端程序媛(员)来说,this这个机制应用的地方是很多的,所以搞懂是必要的,不熟练使用this将遇到一些困惑,下面是一些关于this的学习心得分享,希望大家可以一起学习:

1,this并不是指向自身

首先来看一段代码

 1     function foo(num) {
 2         console.log(\"foo:\" + num); //0 1 2 3 4 
 3         console.log(this); //window对象   
 4         this.count++; //记录foo被调用的次数
 5     }
 6     foo.count = 0; //count 属于foo的属性  并不属于window
 7     var i;
 8     for (i = 0; i < 10; i++) {
 9         if (i < 5) {
10             foo(i);
11         }
12     }
13     console.log(foo.count) //0

很多人认为 :函数内部的this指向当前这个函数,这是错误的

对于这个例子来说,一种解决方法是使用foo标识符代替this来指向自身

 1  function foo(num) {
 2         console.log(\"foo:\" + num); //0 1 2 3 4 
 3         console.log(this); //window对象   
 4         foo.count++; //记录foo被调用的次数
 5     }
 6     foo.count = 0; //count 属于foo的属性  并不属于window
 7     var i;
 8     for (i = 0; i < 10; i++) {
 9         if (i < 5) {
10             foo(i);
11         }
12     }
13     console.log(foo.count) //5

另一种方法是没有规避了this使用

function foo(num) {
        console.log(\"foo:\" + num); //0 1 2 3 4 
        console.log(this); //window对象   
        this.count++; //记录foo被调用的次数
    }
    foo.count = 0; //count 属于foo的属性  并不属于window
    var i;
    for (i = 0; i < 10; i++) {
        if (i < 5) {
            foo.call(foo, i) //使用call() 确保this 指向函数foo
        }
    }
    console.log(foo.count) //5

2,this指向函数作用域(并不是一直都是对的)

 需要知道的一点是this在任何情况都不会指向函数的词法作用域,因为作用域是无法通过js代码访问到的,它存在于引擎内部

下面这个代码很好的说明了这个问题

    function foo() {
        var a = 2;
        this.bar(); // this是window
    }

    function bar() {
        console.log(this); //window
        console.log(this.a); //undefined
    }
    foo();

 

 this究竟是指向什么呢?this是在运行时进行绑定的,并不是在编写时绑定的,它的上下文取决于函数调用时的各种条件,this绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。

当函数调用时,会创建一个执行上下文,这个上下文会记录函数在哪里调用了,函数的调用方法,函数参数等信息,this就是该上下文的一个属性,会在函数执行的过程中用到。

3,函数在执行过程中this是如何绑定的

寻找函数的调用位置,其实有的很明显,而某些编程模式会因此函数的真正的调用位置

分析调用栈

 1  function baz() {
 2         //当前的调用栈是baz
 3         //因此,当前的调用位置是全局作用域
 4         console.log(\"baz\");
 5         bar(); //bar的调用位置
 6     }
 7 
 8     function bar() {
 9         //当前的调用栈是baz->bar
10         //因此,当前的调用位置是baz
11         console.log(\"bar\");
12         foo(); //foo的调用位置
13     }
14 
15     function foo() {
16         //当前的调用栈是baz->bar->foo
17         //因此,当前的调用位置是bar
18         console.log(\"foo\");
19     }
20     baz(); //baz的调用位置

分析调用栈是,决定了this的绑定

 4,this的绑定规则

①默认绑定:独立函数调用  ,在下面的代码中,foo()是直接使用不带任何修饰符的函数引用进行调用的,因此只能使用默认绑定

1  function foo() {
2         console.log(this.a); //this指向window
3     }
4     var a = 2;
5     foo(); //2

但是在严格模式下,全局对象将无法使用默认绑定,因此this会绑定到undefined

1     function foo() {
2         \'use strict\'
3         console.log(this); //undefined
4         console.log(this.a); //报错
5     }
6     var a = 2;
7     foo(); 

但是有个微妙的非常重要的情况,虽然this的邦定规则完全取决于调用位置,但是只有foo运行在非严格模式下是默认绑定才能绑定到全局对象,但在严格模式下,于foo的调用位置无关了

 1   function foo() {
 2         console.log(this); //window
 3         console.log(this.a); //2
 4     }
 5     var a = 2;
 6 
 7     (function() {
 8         \'use strict\'
 9         console.log(this);//undefined
10         foo();
11     })()

②隐式绑定

1 function foo() {
2         console.log(this); //obj 
3         console.log(this.a); //2
4     }
5     var obj = {
6         a: 2,
7         foo: foo
8     }
9     obj.foo();

当foo被调用的时候,它的落脚点确实指向obj对象,当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this邦定到这个上下文对象中,因此,调用foo()时,this被绑定到obj,因此,this.a和obj.a是一样的

③显示绑定

1  function foo() {
2         console.log(this); //obj 
3         console.log(this.a); //2
4     }
5     var obj = {
6         a: 2
7     }
8     foo.call(obj)

.call(...)和apply(...)方法实现显示绑定

他们的第一个参数是一个对象,不是对象的会利用自己的包装对象转换成对象(new Number()  ,new String() ,new Boolen()等),他们会把这个对象绑定到this,接着在调用函数时指定这个this,因为你可以直接指定this的绑定对象,因此我们称为显式绑定

④new绑定

1     function foo(a) {
2         this.a = a;
3     }
4     var bar = new foo(2);
5     console.log(bar.a);//2

构造函数是使用new操作时会被调用的函数。他们并不属于类,也不会实例化一个类,实际上,甚至不能说他们是一直特殊的函数类型,他们只是用new操作费调用的普通函数而已。

使用new来调用函数,会自动执行下面操作:

1,创建(或者构造一个)全新的对象

2,这个对象会被执行【原型】连接

3,这个新对象会被绑定到函数调用的this,

4,如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象

上面的代码,使用new调用foo()时,我们会构造一个新的对象并把它绑定到foo()调用中的this上,new是最后一个可以影响函数调用时this邦定行为的方法,我们称之为new绑定

人已赞赏
随笔日记

java EE中的hello1.java及Annotation(注解)

2020-11-9 3:58:09

随笔日记

数字对讲系统开发札记(前端linux c 后端 c#)

2020-11-9 3:58:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索