关于this的指向

最新推荐文章于 2024-03-20 20:34:20 发布

aomize

最新推荐文章于 2024-03-20 20:34:20 发布

阅读量368

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/aomize/article/details/78271932

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

this的指向是在实际开发中比较重要的一个知识点，以下是我对this的一些总结

1.this是什么时候产生的？

每个函数被调用时都会自动取得两个特殊变量：this和arguments，this就是在这个时候初始化

2.this的值都有哪些？

1）window

当在全局作用域中调用函数时，this指向window对象

var age = '18';

function getAge() {
    var age = '20';
    alert(this.age);  
}

getAge();  // 18

在浏览器中获得的信息如下：

这里写图片描述

2）对象

自定义对象或实例化对象后，this指向调用的对象

通过构造函数创建自定义对象

var name = 'james';

function Person() {
    this.name = 'john';

    this.sayName = function () {
        alert(this.name);
    }
}

var person = new Person();
person.sayName();   // john

在浏览器中获得的信息如下：

这里写图片描述

通过构造函数创建对象，this指向构造函数

通过对象字面量创建对象

var name = 'james';

var person = {
    name: 'john',
    sayName: function () {
        alert(this.name);
    }
};

person.sayName();   // john

在浏览器中获得的信息如下：

这里写图片描述

通过对象字面量创建对象，this指向object对象

总结一句话就是：谁调用就指向谁（特殊的，闭包中的this指向window）

3）闭包中的this指向

var color = 'blue';

function func() {
    var color = 'red';
    return function () {
        alert(this.color);
    }
}

func()();  //blue

在闭包中，this指向的是window对象

4）事件处理函数中的this指向

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        botton {
            padding: 10px 20px;
            color: #fff;
            cursor: pointer;
            background: #359797;
        }
    </style>
</head>
<body>
    <botton id="click">点击</botton>
    <script type="text/javascript">
        var clickDom = document.getElementById('click');

        clickDom.onclick = function () {
            console.log(this);
        }
    </script>
</body>
</html>

结果如下：

这里写图片描述

this指向clickDom

5）setTimeout中的this指向

var a = 5;
var timer = setTimeout(function () {
    var a = 3;

    alert(this.a);   // 5
});

setTimeout中的this始终指向的是window

3.如何改变this的指向？

可以通过apply()和call()方法来改变this的指向，这两个方法都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值

（1）apply()方法

apply()方法接收两个参数，一个是在其中运行函数的作用域，另一个是参数数组

function sum(num1, num2) {
    return num1 + num2;
}

function callSum1(num1, num2) {
    return sum.apply(this, arguments);     // 传入arguments对象
}

function callSum2(num1, num2) {
    return sum.apply(this, [num1, num2]);  // 传入数组
}

alert(callSum1(10, 10));   // 20
alert(callSum2(10, 10));   // 20

在浏览器中获得的信息如下：

这里写图片描述

因为是在全局作用域中调用的，所以传入的就是window对象

（2）call()方法

call方法也接收两个参数，一个是在其中运行函数的作用域，另一个是其余的参数（其余参数需要一一列出）

function sum(num1, num2) {
    return num1 + num2;
}

function callSum(num1, num2) {
    return sum.call(this, num1, num2);
}

alert(callSum(10, 10));   // 20

在浏览器中获得的信息如下：

这里写图片描述

因为是在全局作用域中调用的，所以传入的就是window对象

（完）

aomize

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于this的指向

每个函数被调用时都会自动取得两个特殊变量：this和arguments。内部函数在搜索这两个变量时，只会搜索到其活动对象为止，因此永远不可能直接访问外部函数中的这两个变量举个例子：var age = '18';function getAge() { var age = '20'; alert(this.age); }getAge(); // 18在浏览器中获得的信息如下：在全局
复制链接

扫一扫

专栏目录