this指向、Math对象、闭包

最新推荐文章于 2024-03-10 18:11:35 发布

PCthedream

最新推荐文章于 2024-03-10 18:11:35 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

文章标签： java javascript 前端

本文链接：https://blog.youkuaiyun.com/PCthedream/article/details/127269569

本文详细解析了JavaScript中this关键字的含义及不同场景下的指向规则，并通过实例演示了闭包的作用及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、this是什么？

this是指JavaScript语言的一个关键字。在函数运行时，自动生成一个内部对象，只能在函数内部中使用。随着函数使用场合的不同，this的值也会发生变化，指向是不确定的。指向是可以改变的。不过有一个总的规则，this指的是调用函数的那个对象（谁调用的，this就是指向的谁）。

	存在场景	this指向的值
指向window	普通的函数	window对象。不过需要注意的就是如果普通的函数中使用了严格模式，函数内部的this就是undefined
	内置函数（比如说计时器）	里面的this指向的是window
	回调函数	所指向的是window
指向调用者本身	在数组中	this指的就是调用者本身
	在对象中	this指向的就是调用者本身
	在构造函数中	this指向的是创建的新对象，而不是构造函数本身

一：普通的函数。在普通的函数中使用的this是指window，可以理解为没有调用者

function fun1(){
    console.log(this);
};
fun1(); // output:window对象

不过需要的注意的地方，如果局部函数内使用严格模式的话，所获取到的this就是undefined

function fun(){
    "use strict"; // 使用了严格模式
    console.log(this); // undefined
};
fun();

二、内置的函数（比如说计时器，setimeout和setinterval）

function f(){
    console.log(this);
};
setTimeout(f,1000); // output:window对象

三、回调函数（一个函数作为参数被传递给另外一个函数，就可以理解为回调函数）

function test(v){
    console.log(this);
};
function f2(callback,v){
    callback(v);
};
f2(test,'hello'); // output:window
//等同于f2(function(v){console.log(v)},'hello');

回调函数第二个使用场景

var arr = [1,2,3,4,5,6].filter(function(item,index){
    console.log(this); // output:window
})

四：this存在数组里面

function f3(){
    console.log(this);
};
var arr = [f3,4,5,6];
arr[0](); // output [ƒ, 4, 5, 6]  notice:输出的是调用者本身

需要注意的地方:

function f2(){
    console.log(this);
};
var arr2 = [f2,4,5,6];
var f = arr2[0];
f();

还有一个注意点：

var arr = [23,22,10,this];
console.log(arr[3]); // output:window对象

五：this在对象object上

var obj = {
    say:function(){
        console.log(this);}
};
obj.say(); // output: {say: ƒ}

六：在构造函数中，所指的this不是构造函数本身

function Fun(name,age){
    this.name = name;
    this.age = age;
    this.action = function(){console.log(this)}
};
var fun2 = new Fun("wanguiping",19);
fun2.action(); // output: Fun {name: "wanguiping", age: 19, action: ƒ}

Math对象

常见属性：

Math.E

欧拉常数，也是自然对数的底数，约等于 2.718。
console.log(Math.E); //输出为2.718281828459045

Math.LN2

2 的自然对数，约等于 0.693。
console.log(Math.LN2); //输出为0.6931471805599453

Math.LN10

10 的自然对数，约等于 2.303。
console.log(Math.LN10); //输出为2.302585092994046

Math.LOG2E

以 2 为底的 E 的对数，约等于 1.443。
console.log(Math.LOG2E); //输出为1.4426950408889634

Math.LOG10E

以 10 为底的 E 的对数，约等于 0.434。
console.log(Math.LOG10E); //输出为0.4342944819032518

Math.PI

圆周率，一个圆的周长和直径之比，约等于 3.14159。
console.log(Math.PI); //输出为3.141592653589793

Math.abs(x)

返回一个数的绝对值。
console.log(Math.abs(-1)); //输出为1

Math.max(value1[,value2,...])

返回一组数中的最大值（如果任一参数不能转换为数值，则返回NaN）。
 console.log(Math.max(1,2,3)); //输出为3
console.log(Math.max(1,2,3,'abc')); //输出为NaN

Math.min(value1[,value2,...])

返回一组数中的最小值（如果任一参数不能转换为数值，则返回NaN）。
console.log(Math.min(1,2,3)); //输出为1
console.log(Math.min(1,2,3,'abc')); //输出为NaN

Math.pow(x,y)

返回x的y次幂。
console.log(Math.pow(2,3)); //输出为8

Math.random()

返回[0,1)之间的一个随机数。
console.log(Math.random()); // 输出一个[0,1)之间的随机数

闭包：

一：为什么需要闭包

使外部得以访问函数内部的变量;
避免全局变量的使用,防止全局变量污染(匿名函数);
让某些关键变量得以常驻内存,免于被回收销毁(闭包函数);

二：闭包有哪些作用

解决变量污染问题，让变量被函数保护起来
可以延长变量的生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 外部函数
        function outer() {
            // 外部函数中的局部变量
            let n=10;
            // 内部函数
            function inner() {
                // 内部函数访问外部函数的局部变量
                console.log(n);
            }
            // 将内部函数return出去，这样外部才可以调用
            return inner
        }
        let fn =outer();
        console.log(fn);
        fn();
        // 闭包的作用
        // 作用1:解决变量污染问题，让变量被函数保护起来
        // 作用2：可以延长变量的生命周期
        let count=0;
        setInterval(function () {
            console.log(count++);
        },1000)
        // 以上代码中的count是一个使用频繁很高的变量名
        // 为了避免和其他位置的代码冲突，可以在使用一个函数把以上的代码包裹起来，起到保护作用

        function fun() {
            let count = 0;
            setInterval(function () {
                console.log(count++);
                
            },1000)
        }
        fn();
        // 以上代码中，setInterval函数与count构成了闭包
    </script>
</body>
</html>