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 函数
  • 相关阅读:
    laravel 5.5 仓库模式 文件之间接口与实现操作
    php 无线分类 根据子级找父级
    php 无限极分类,根据父级 找子级
    laravel5.4 中 dd和dump的区别。
    laravel hash密码生成和密码验证
    oracle建表详细信息
    关于组件的认识
    java的Thread Dump诊断工具
    weblogic连接池
    详解Oracle数据字典
  • 原文地址:https://www.cnblogs.com/grubber/p/12982365.html
Copyright © 2011-2022 走看看