zoukankan      html  css  js  c++  java
  • JavaScript中的this相关

    在JavaScript中,this关键字的表现和其他语言有略微的区别, 在js的严格模式和非严格模式之间也会有一些区别。
    this.value = 1;
    
    function test_1(){
        console.log(this.value);
    }
    
    test_1(); // 会输出1
    
    function test_2() {
        "use strict";
        console.log(this.value);
    }
    
    test_2(); // 会报错,因为在严格模式下,此时this指向undefined
    
    
    
    简单总结来说,this在非严格模式下,总是会指向调用该函数的对象,此处是根据js特性,指向全局对象window,在非严格模式下,window可以省略,其实这里的value和两个函数test_1、test_2都是挂载在在window对象下的,在严格模式下,window不能省略,所以会报错,但如果把函数test_2调用改写成下面这样就可以了。
    window.test_2(); // 会输出1,此时this就会指向了调用test_2()函数的调用对象window
    
    下面的一些函数方法可以改变this的指向,apply()、call()、bind()
    • apply()是函数的一个方法,作用是改变函数的调用对象。它接收两个参数,它的第一个参数就表示改变后的调用这个函数的对象,第二个参数是可选的,是个数组(或类似数组对象)。因此,这时this指的就是这第一个参数,如果第一个参数的值为null或者undefined时,则此时this指向全局对象window

      • 语法

        func.apply(thisArg, [argsArray])

      • 参数

        thisArg

        必选的。在 func 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 nullundefined 时会自动替换为指向全局对象,原始值会被包装。

      • argsArray

        可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给func函数。如果该参数的值为nullundefined,则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

      • 返回值

        调用有指定this值和参数的函数的结果。

    • call()方法和apply()方法类似,只有一个区别,就是 call() 方法接受的是一个参数列表,而 apply() 方法接受的是一个包含多个参数的数组。

      • 语法

        function.call(thisArg, arg1, arg2, ...)

      • 参数

        thisArg

        可选的。在 function 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 nullundefined 时会自动替换为指向全局对象,原始值会被包装。

      • arg1, arg2, ...

        指定的参数列表。

      • 返回值

        使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined

    • bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

      • 语法

        function.bind(thisArg, arg1, arg2, ...)

      • 参数

        thisArg

        调用绑定函数时作为 this 参数传递给目标函数的值。 如果使用new运算符构造绑定函数,则忽略该值。当使用 bindsetTimeout 中创建一个函数(作为回调提供)时,作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为空,或者thisArgnullundefined,执行作用域的 this 将被视为新函数的 thisArg

      • arg1, arg2, ...

        当目标函数被调用时,被预置入绑定函数的参数列表中的参数。

      • 返回值

        返回一个原函数的拷贝,并拥有指定的 this 值和初始参数。

    call、apply和bind函数存在的区别:

    bind返回对应函数, 便于稍后调用; apply, call则是立即调用。

    除此外, 在 ES6 的箭头函数中, call 和 apply 将失效, 对于箭头函数来说:

    • 箭头函数体内的 this 对象, 就是定义时所在的对象, 而不是使用时所在的对象;所以不需要类似于var _this = this这种丑陋的写法
    • 箭头函数不可以当作构造函数,也就是说不可以使用 new 命令, 否则会抛出一个错误
    • 箭头函数不可以使用 arguments 对象,,该对象在函数体内不存在. 如果要用, 可以用 Rest 参数代替
    • 不可以使用 yield 命令, 因此箭头函数不能用作 Generator 函数
  • 相关阅读:
    状态压缩 + 暴力 HDOJ 4770 Lights Against Dudely
    简单几何(推公式) UVA 11646 Athletics Track
    简单几何(四边形形状) UVA 11800 Determine the Shape
    简单几何(求交点) UVA 11437 Triangle Fun
    计算几何模板
    简单几何(相对运动距离最值) UVA 11796 Dog Distance
    简单几何(求划分区域) LA 3263 That Nice Euler Circuit
    覆盖的面积 HDU
    Desert King 最小比率生成树 (好题)
    约会安排 (区间合并)毒瘤题
  • 原文地址:https://www.cnblogs.com/grubber/p/12982365.html
Copyright © 2011-2022 走看看