zoukankan      html  css  js  c++  java
  • js中this的原理和用法

    一.为什么要使用this?

    this 提供了一种更优雅的方式来隐式“传递”一个对象引用,因此可以将 API 设计得更加简洁并且易于复用。随着你的使用模式越来越复杂,显式传递上下文对象会让代码变得越来越混乱,使用 this则不会这样。

    二.this 是什么?

    this在函数中被使用,一般情况下this指的是调用this所在函数的对象。即 this === 调用this所在函数对象。

    三.this应用场景

    1.当this所在的函数为对象一个健值时,这个函数中的this是指向该健值所在的对象。
    2.当this所在的函数不属于对象的健值,此时直接调用该函数时,该函数中的this指向window,严格模式下指向undefined
    3.构造函数中this指向new出来这个对象。
    4.函数应用了 appaly、call、bind 方法,函数this指向这三个方法所指定的对象。
    总结:this不存在于函数中:严格报错,非严格执行window。其余情况this位于函数中,以上几种情况。

    四.apply、call、bind 改变this指向

    1.Function.prototype.apply 和 Function.prototype.call 方法用法其实一致的,Function.prototype.apply传入两个参数,第一个参数为this所指向的对象,第二个参数为函数形参 - 为一个数组。Function.prototype.call 传入n个参数(n>=1),第一个参数为this指向对象,后面的参数为函数所需形参。

    let obj = {
        number:0
    };
    function sum(){
        let sum = this.number;
        console.log(sum); //0
        console.log(arguments);    //两次输出一致为一个类数组 
        for(let i = 0,length = arguments.length;i<length;i++){
            sum += arguments[i];
        }
        return sum
    }
    console.log(sum.apply(obj,[1,2,3])); //6
    console.log(sum.call(obj,1,2,3));     //6
    

    2.Function.prototype.bind 也可传入n个参数,第一个参数为this指向对象,后面参数为形参,此方法和call不同之处在于 bind是在函数声明赋值给一个变量进行保存时进行绑定this指向对象和传入参数,而call 和 apply 为函数调用时候进行绑定。
    注:通过bing绑定this指向对象之后,无法在函数调用时候再通过apply或者call进行更改。

    let obj = {
        number:0
    };
    let sum = function(){
        let sum = this.number;
        console.log(sum); //0
        console.log(arguments);    //两次输出一致为一个类数组 
        for(let i = 0,length = arguments.length;i<length;i++){
            sum += arguments[i];
        }
        return sum
    }.bind(obj,1,2,3);
    console.log(sum()); //6
    console.log(sum(4));//10      绑定时通过bind传入的为默认参数,调用函数时还可以传入参数。
    

    注意:
    箭头函数不绑定Arguments 对象
    箭头函数只能用于非方法函数
    箭头函数不能作为构造函数
    箭头函数没有property属性

  • 相关阅读:
    刷新
    自定义背景色
    会议通js
    Flex Layout Attribute
    spin.js
    jq size()与length的区别
    初识node.js
    [Swift]归并排序 | Merge sort
    [Swift]桶排序 | Bucket sort
    [Swift]计数排序 | Counting sort
  • 原文地址:https://www.cnblogs.com/honkerzh/p/10576569.html
Copyright © 2011-2022 走看看