this 4种调用方式

简单说明 this 4种使用方式:
1、调用者使用:

             function t(){
                      this.num = 10;
              }
              t();
              console.log(num) => 10
              console.log(window.num) =>10

这样定义执行 t(),this其实为null,this为null的时候会指向到window对象上
使用 'use strict' 严格模式下,当this 为 null 时 会抛出一个异常!
2、作为构造函数调用:

       function User(name,age){
            this.name = name;
            this.age =  age;
            return "hello";  // 无效的
        }
                  var user = new User('多多','18');
                  console.log(user);
                  console.log(typeof(user)) => object

      /*
      1、 方法(函数) 被 new 的瞬间,会得到一个空对象 {}
      2、方法(函数)的 this 指向该对象
      3、运行该方法:
       {}.name = name 对象的name 等于传过来的 name
       {}.color = color
        4、最后返回该对象
        5、在构造函数 内部 return 是没用作用的(被忽略)!!!!!
        */

3、函数通过 call()调用:可以动态的更改 this 的指向
可以让当前对象去使用别的对象的方法
需要的参数传递过去!
语法:object1.方法 / 函数.call(object2,'参数1','参数2',........,'参数N')

          var btn1 = document.querySelector('#btn1');
          var btn2 = document.querySelector('#btn2'); 
          function changeBg(){
                this.onclick = function (){
                this.style.backgroundColor = 'orange';
          }.bind(this)
        }
          t.call(btn1);
          t.call(btn2);

4、函数/方法 通过 apply()调用:
也可以动态的更改 this 的指向,和 call()很像,传递参数的方式不一样
语法:object1.方法 / 函数.call(object2,['参数1','参数2',........,'参数N'])
如果传递的参数不是 array
=> Uncaught TypeError: CreateListFromArrayLike called on non-object

        var Cat = {
             name: '小黑猫'
        }
        var Tigger = {
            name: '白虎',
            eat: function(obj){
                console.log('角色  =>'+this.name + ' 技能 :'+obj);
            }
        }
        Tigger.eat.call(Cat,'别看我小,我也会吃人...');
        Tigger.eat.apply(Cat,['别看我小,我也会吃人...']);

以上就是this 的简单使用,可以在去深入了解!

推荐阅读更多精彩内容

  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 6,164评论 15 51
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 106,429评论 12 127
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    千机楼阅读 1,030评论 0 4
  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 382评论 0 6
  • 原文地址:C语言函数调用栈(一)C语言函数调用栈(二) 0 引言 程序的执行过程可看作连续的函数调用。当一个函数执...
    小猪啊呜阅读 2,985评论 1 18