zoukankan      html  css  js  c++  java
  • this指向 一般函数与箭头函数

    es6对象内函数一般有两种写法:

    var person1 = {
        name: "p1",
        sayThis() {
            console.log(this);
        }
    };
    
    var person2 = {
        name: "p2",
        sayThis:()=> {
            console.log(this);
        }
    };
    
    person1.sayThis()
    person2.sayThis()

    输出:

    person1的写法,类似于:

    var person1 = {
        name: "p1",
        sayThis: function() {
            console.log(this);
        }
    };

    this指向当前调用此方法的对象

    person2的写法,使用了箭头函数,箭头函数的this指向当前的执行环境(创建它时所处的上下文)(箭头函数可以捕获其所在上下文的this值),这里当然是window对象,箭头函数并没有自己的this值,它的this继承自外围作用域

    function Person() {  
        this.age = 0;  
        setInterval(() => {
            // 回调里面的 `this` 变量就指向了期望的那个对象了
            this.age++;
        }, 3000);
    }
    
    var p = new Person();

    备注:call,apply,bind对es6中的this,无效

    var objProject = this;
    var foo = (() => this);
    console.log(foo());  // window
    console.log(objProject);  // window
    console.log(foo() === objProject ); // true
    // 作为对象的一个方法调用
    var obj = {foo: foo};
    console.log(obj.foo() === objProject ); // true
    // 尝试使用call来设定this
    console.log(foo.call(obj) === objProject ); // true
    // 尝试使用bind来设定this
    foo = foo.bind(obj);
    console.log(foo() === objProject ); // true
  • 相关阅读:
    laravel如何自定义一个路由文件
    RGAC-laravel权限管理
    导航栏下划线跟随
    php简单的判断用户登陆
    php判断文件上传的类型
    git 如何删除仓库中的文件
    laravle中config( )函数的使用
    [leetcode] Count and Say
    [leetcode] Sudoku Solver
    [leetcode] Search Insert Position
  • 原文地址:https://www.cnblogs.com/yanze/p/7645347.html
Copyright © 2011-2022 走看看