zoukankan      html  css  js  c++  java
  • 学习笔记=>《你不知道的JavaScript(上卷)第二部分》第一章:关于this

    为什么要使用this

      通过一个例子来看看为什么要使用this:

    var me = {
            name:'lebron james'
    }
    
    var you = {
            name:'杨少侠'
    }
    
    function bar(){
            return this.name;
    }
    
    function baz(){
            return '----->' + bar.call(me).toUpperCase();
    }
    
    console.log(bar.call(me));    //'lebron james'
    
    console.log(bar.call(you));   //'杨少侠'
    
    console.log(baz());   //'----->LEBRON JAMES'

      这段代码可以在不同的上下文对象(me和you)中重复使用函数bar和baz,不用针对每个对象编写不同版本的函数。

      如果不使用this就得显示的传递一个上下文对象给bar和baz:

    function bar(context){
           return context.name;
    }
    
    function baz(context){
           return '------>' + context.name.toUpperCase();
    }
    
    console.log(bar(you));
    
    console.log(baz(me));

      然而this提供了一种更优雅的方式来‘隐式’传递一个对象引用。

    对this的误解:

      1,指向自身

    bar.count = 0;
    
    function bar(num){
            console.log(num);
            this.count ++;
    }
    
    for(var i=0;i<3;i++){
           bar(i);
    }
    
    console.log(bar.count);     //0
    
    //0,1,2

      实际上bar是执行了3次的,最后打印bar.count还是为0,显然指向自身是不正确的。

      其实this.count中的this并不是执行bar这个函数对象,虽然名字相同但是其实根对象并不相同。

      (this.count ++;其实最后在全局的作用下创建了一个变量count)

      另一种解决办法使用bar标识符代替this:

    bar.count = 0;
    
    function bar(num){
         console.log(num);    //0,1,2
         bar.count ++;
    }
    
    for(var i=0;i<3;i++){
         bar(i);
    }
    
    console.log(bar.count);    //3

      这种方式完全依赖bar的词法作用域。

      另一种方式是强制this指向bar函数对象:

    bar.count = 0;
    
    function bar(num){
         console.log(num);    //0,1,2
         this.count ++;
    }
    
    for(var i=0;i<3;i++){
          bar.call(bar,i);
    }
    
    console.log(bar.count);  //3

      2,它的作用域,书中描述:

    需要明确的是,this在任何情况下都不会指向函数的词法作用域,在JavaScript内部,作用域确实和对象类似,可见的标识符都是它的属性,但是作用域‘对象’无法通过JavaScript代码访问,它存在于JavaScript引擎内部。

    每当你想要把词法作用域的查找和this混合使用时,一定要提醒自己,这是无法实现的。

    this到底是什么:

      this是在运行的时候进行绑定的,并不是在编写的时候绑定。它的上下文取决于函数调用时的各

      种条件。this的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式

  • 相关阅读:
    android app记录执行日志 捕获奔溃异常 ,存储日志到文件
    对扩展openflow协议的一点思考
    Echarts柱状图
    python实现插入排序
    MyBatis -- 对表进行增删改查(基于注解的实现)
    pat解题报告【1082】
    [Swift]LeetCode974. 和可被 K 整除的子数组 | Subarray Sums Divisible by K
    [Swift]LeetCode976. 三角形的最大周长 | Largest Perimeter Triangle
    [Swift]LeetCode345. 反转字符串中的元音字母 | Reverse Vowels of a String
    [Swift]LeetCode343. 整数拆分 | Integer Break
  • 原文地址:https://www.cnblogs.com/huangzhenghaoBKY/p/9827035.html
Copyright © 2011-2022 走看看