JavaScript 快速理解 this 对象（上）

最新推荐文章于 2024-09-04 16:37:26 发布

Lhy@@

最新推荐文章于 2024-09-04 16:37:26 发布

阅读量164

点赞数

分类专栏：每天一个JS小知识点，加油！文章标签： js

本文链接：https://blog.csdn.net/Lhy_JL/article/details/115028883

版权

每天一个JS小知识点，加油！专栏收录该内容

48 篇文章 1 订阅

订阅专栏

this对象在标准函数和箭头函数中不同的行为

一、认清 -- 标准函数、箭头函数
二、标准函数中 this 对象
三、箭头函数中 this 对象
四、不同调用函数的语法，this 指向的变化
五、this 指向规则总结
- 5.1 function 定义的对象 - - - this 指向
- 5.2 箭头函数中 this指向

一、认清 – 标准函数、箭头函数

标准函数：形如 function 关键字声明的函数。
箭头函数： “=>” 声明的函数。

标准函数

二、标准函数中 this 对象

this 引用的是把函数当方法调用的上下文对象
总结：谁调用，this 指向谁。

<body>
  <script>
    var color = 'red';
    function test() {
      console.log('this.color:', this.color);
    }
    let obj = {
      color: 'green'
    }
    test();//调用test的上下文是全局上下文：window
    obj.test = test;
    obj.test();//调用test的上下文，是obj对象上下文
  </script>
</body>

三、箭头函数中 this 对象

- this 引用的是定义箭头函数的上下文

<body>
  <script>
    var name = '外部name';
    var age = '外部age';
    var ob = new Object();
    ob.name = 'ob.name';
    ob.age = 'ob.age';
    ob.sayname = function () {
      console.log(this.name);
    }
    ob.sayage = () => {
      console.log(this.age);
    };

    ob.sayname();
    ob.sayage();
  </script>
</body>

结果：

标准函数sayname打印的是ob对象的name，箭头函数sayage打印的是window下的age.。

解释：
根据上面讲的，谁引用的sayname()，是ob对象，即this --> ob；
sayage是在哪里定义的，是在window也就是全局上下文中，即this --> window；

四、不同调用函数的语法，this 指向的变化

<body>
  <script>
    var name = '全局lhy';
    var age = '全局18';
    var ob = new Object();
    ob.name = 'ob对象lily';
    ob.age = 'ob对象20';
    ob.sayname = function () {
      console.log(this.name);
    }
    ob.sayage = () => {
      console.log(this.age);
    };
    console.log("ob.sayname的不同调用：");
    ob.sayname();
    (ob.sayname)();
    (ob.sayname = ob.sayname)();
    console.log("ob.sayage的不同调用：");
    ob.sayage();
    (ob.sayage)();
    (ob.sayage = ob.sayage)();
  </script>
</body>

结果：（震了惊···） ob.sayname = ob.sayname)();

(ob.sayname = ob.sayname)(),它的作用等价于：

其中aa（）是在全局下调用，所以打印的是全局的name

var aa = ob.sayname;
aa();

五、this 指向规则总结

5.1 function 定义的对象 - - - this 指向

默认指向window：函数内部的 this，（严格模式下是 undefined）
隐式绑定：
谁（对象）调用，this就指向谁。(更多例子参考上面第四部分)

var a = "全局a";
function one(){
  console.log(this.a);
}
var obj ={
  a:'obj内部a',
  one:one
}
obj.one(); //obj内部a

var bar = obj.one;
bar();//全局a

显示绑定：call(obj,a,b,c)、apply(obj,[a,b,c])、bind(obj,a,b,c);

this指向 obj 对象
new ： this指向被new出来的对象，

    var brand = '没哟';

    function Car(brand = 'daZhong') {
      this.brand = brand;
      this.print = function () {
        console.log(this.brand);
      }
    }

    var benze = new Car('benze');
    benze.print();//benze ,只在这个起效果
    var nnnn = new Car();
    nnnn.print(); //daZhong
    var aa = benze.print; 
    aa();//没哟