我的JS笔记 -- this


this引用的是函数据以执行的环境对象。虽然函数的作用域是在声明时决定的,但是this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用,所以this的指向是可变的。

this是函数的内部属性,所以this的使用环境是在函数中。

this的指向是一个对象。

this绑定规则

判断函数中this绑定的对象规则:

  1. 函数是否在new中调用(new 绑定)?如果是的话this绑定的是新创建的对象;
  2. 函数是否通过call、apply(显式绑定)或者硬绑定调用? 如果是的话,this绑定的是指定的对象;
  3. 函数是否在某个上下文对象中调用(也就是函数作为某个对象的方法调用)(隐式绑定)?如果是的话,this绑定的是那个上下文对象;
  4. 如果都不是的话, 使用默认绑定。如果在严格模式下,就绑定到undefined,否则绑定到全局对象;

从上至下逐条判断,就能正确判断this的指向。

  • new 绑定,构造函数生成实例中调用;

    function F() { this.a = 1; this.sayA = function () { console.log(this.a); } } var f = new F(); f.sayA(); // 1

  • call、apply调用(显式绑定);

    • call、apply接收两个参数,第一个是参数是对象,函数this就会指向这个对象,如果你传入了一个原始值(字符串类型、布尔类型或者数字类型)来当作 this 的绑定对象,这个原始值会被转换成它的对象形式(也就是 new String(..)、new Boolean(..)或者new Number(..));第二个参数是函数调用的;

        var a = 1;
        var obj = {
        	a: 2
        };
        function f() {
        	console.log(this.a);
        }
        f(); // 1
        f.call(obj); // 2,硬性将f的this绑定到指定对象
        f.apply(obj); // 2
      复制代码
    • bind,bind的作用与call、apply一样,都是为函数指定执行环境对象,但是bind返回的是一个新函数,而call和apply会直接执行返回结果;

        var a = 1;
        var obj = {
        	a: 2
        };
        function f() {
        	console.log(this.a);
        }
        f(); // 1
        var f2 = f.bind(obj); // 返回的是一个新函数,所以可以将函数保存至变量,方便以后调用
        f2(); // 2
      复制代码
    • 如果你把null或者undefined作为 this 的绑定对象传入call、apply或者bind,这些值在调用时会被忽略,实际应用的是默认绑定规则;

  • 作为对象方法调用(隐式绑定);

      var a = 1;
      function f() {
      	console.log(this.a);
      }
      var obj = {
      	a: 2,
      	f: f // 将对象的方法指向函数
      };
      obj.f(); // 2,当函数作为对象方法时,this就指向当前对象
    
      var f2 = obj.f;
      f2(); //1,相当于直接调用f,所以this指向全局对象
    
      var obj2 = {
      	a: 3,
      	f: obj.f
      };
      obj2.f(); // 3,作为对象方法调用
    复制代码
  • 默认函数调用,函数独立调用;

      var a = 1; // 全局变量会成为全局对象的属性,所以当this指向全局对象时能够访问
      function f() {
      	console.log(this.a);
      }
      f(); // 1,普通的函数调用,this指向全局对象
    复制代码

更多文章在 这里 ,觉得不错希望点个 star

写在最后:

我只是一个自学JS的初学者,笔记是学习时各处收集的,有一些是我自己的理解。但是不少知识来自分享到网络的大神们,因为实在不知道我在哪里使用了谁的文章,所以只能统一的表达一下我的感谢! 文章里边可能有的地方会有错误,如果发现,可以留言提醒我。

转载于:https://juejin.im/post/5a31388551882575cb741bb9

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值