zoukankan      html  css  js  c++  java
  • js this 指向(es5)和es6箭头函数this指向问题总结(邹文丰版)

     本文纯属自己结合网上文章总结,有问题和不同想法欢迎留言指正
    /********************简单小例子********************/
    var test =function () {
    console.log(this);
    };
    // test(); //window
    /*****************************2***********************************/
    var test2 =function () {
    console.log(this);
    return function () {
    console.log(this)
    }
    };
    var bb={
    a:'1',
    cc:test2 //赋值类型还未执行
    };
    // bb.cc()(); // 1.obj 2.window
    /*****************************3***********************************/
    var test3 =function () {
    console.log(this);
    return function () {
    console.log(this)
    }
    };
    var bb3={
    a:'1',
    cc:test3() //默认在最外层执行
    };
    bb3.cc(); // 1.window 2.obj

    //test2 tes3 只是一个括号的差别,决定指向的调用者;

    /************普通函数例子*****************/
    var obj = {
    birth: 1990,
    getAge: function () {
    var b = this.birth;
    var that=this;
    console.log(this); //this指向obj
    return function () {
    console.log(that);//that缓存保留在指向obj
    console.log(this); //this指向window 最终的调用者不是obj而是window;
    };
    }
    };
    // obj.getAge()();//直接指向调用者“obj.getAge()”执行后就变成“()”而“()直接在最外层window上”

    /************箭头函数登入*****************/
    var obj2 = {
    name:'obj2',
    birth: 1990,
    getAge: function () {
    var b = this.birth; // 1990
    return () => {
    var c='hehe';
    console.log(this);//obj2
    return () => {
    console.log(this) //obj2 箭头函数this始终指向最外层obj2;
    }
    }
    }
    };
    // obj2.getAge()()();

    //结合两个例子箭头函数的设计更加合理的,this始终保持指向定义时候的obj2,传统的函数在这种情况就直接指向window,
    // 个人感觉有点不合理,

    /*************************普通构造函数***************************************/
    function Fn(name,age){
    this.name=name;
    this.age=age;
    console.log(this); //通过new一个实例之后this指向会指向这个对象
    return function () {
    console.log(this) //最终执行调用的还是window;不是new出来的对象
    };
    }
    // var obj=new Fn('张飞','14'); //this Fn
    // obj(); //this window


    /*******************箭头构造函数*********************************************/
    function Fn2(name,age){
    this.name=name;
    this.age=age;
    console.log(this); //obj2
    return () => {
    console.log(this) //obj2
    return () => {
    console.log(this) //obj2
    }
    }
    }
    // var obj2=new Fn2('张飞','14'); //this指向obj2
    // obj2(); //this指向obj2

    // Fn2()()();//如果构造函数直接当做普通函数来执行,那么全部指向最初的window

    //通过对比可以发现总结一下箭头函数很好的解决了this原来在函数内部指向不合理的情况。你只要记住箭头函数会继承最初
    //最外层定义的this
  • 相关阅读:
    gulp通过http-proxy-middleware开启反向代理,实现跨域
    一些我常用的css 或者 js
    四舍五入
    生成 SSH 公钥
    对象转为数组 用lodash
    廖雪峰的官方网站
    window对象
    字符串
    简单得日期
    LeetCode 113. Path Sum II 20170705 部分之前做了没写的题目
  • 原文地址:https://www.cnblogs.com/zou1234/p/8729082.html
Copyright © 2011-2022 走看看