JavaScript中this关键字指代总结

来源：互联网发布：苹果电脑查看mac地址编辑：程序博客网时间：2024/05/01 23:23

JavaScript中this关键字指代总结

在JavaScript中，this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
总的原则：this指的是调用函数的那个对象。

1. 纯粹的函数调用

/*情况一：纯粹的函数调用*//*this代表全局对象*/var x = 1;var y = 2;function test1(){    this.y = 20;    console.log(this.x);    console.log(this); //Window}test1(); //1console.log(y); //20

2. 作为对象的方法调用

/*情况二：作为对象方法的调用*//*this代表上下文*/var o = {};o.x = 3;o.m = test2;o.m(); //3function test2(){    console.log(this.x);}

<!DOCTYPE html><html><head></head><body>    <p id="txt"></p>    <button id="btn">Testbtn</button>    <script type="text/javascript">    /*addEventListener()的作用域为元素作用域*/    /*this代表DOM元素*/    document.getElementById("btn").addEventListener("click", function(){        document.getElementById("txt").innerHTML = "Hello World-addEventListener";        console.log(this.id); //btn    });    </script></body></html>

3. 作为构造函数

/*情况三：作为构造函数*//*this代表通过构造函数生成的新对象*/function test3(){    this.x = 5;}var o2 = new test3();console.log(o2.x); //5

4. apply/call调用

/*情况四：apply/call调用*//*this代表改变后调用这个函数的对象*/var X = 100;function test4(a,b,c){    console.log(this.X + "-" +String(a) + "-" + String(b) + "-" + String(c)); }var o3 = {};o3.X = 7;var o4 = {};o4.X = 9;o3.m = test4;o3.m.apply();//参数为空时，默认调用全局对象：100-undefined-undefined-undefinedo3.m.apply(o3); //7-undefined-undefined-undefinedo3.m.call(); //100-undefined-undefined-undefinedo3.m.apply(o4,[1,2,3]); //9-1-2-3o3.m.call(o4,1,3,4,5); //9-1-3-4o3.m.apply(o4,[1,2]); //9-1-2-undefined

0 0