JavaScript中this关键字指代总结

最新推荐文章于 2022-05-13 14:58:34 发布

敲代码的长腿欧巴

最新推荐文章于 2022-05-13 14:58:34 发布

阅读量589

点赞数

分类专栏： Web前端文章标签： javascript

本文链接：https://blog.csdn.net/Mark_Lyu/article/details/52276582

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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(); //1
console.log(y); //20

2. 作为对象的方法调用

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

function 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-undefined
o3.m.apply(o3); //7-undefined-undefined-undefined
o3.m.call(); //100-undefined-undefined-undefined
o3.m.apply(o4,[1,2,3]); //9-1-2-3
o3.m.call(o4,1,3,4,5); //9-1-3-4
o3.m.apply(o4,[1,2]); //9-1-2-undefined

敲代码的长腿欧巴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中this关键字指代总结

JavaScript中this关键字指代总结在JavaScript中，this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。总的原则：this指的是调用函数的那个对象。1. 纯粹的函数调用/*情况一：纯粹的函数调用*//*this代表全局对象*/var x = 1;var y = 2;function test1(){ this.y = 20; c
复制链接

扫一扫