zoukankan      html  css  js  c++  java
  • this 机制的四种规则

    江湖人称,谁调用 this,this 就指向谁。

    那么 this 到底绑定或者引用的是哪个对象环境呢,以下便是四种规则

    1. 默认绑定全局变量

    function fn() {
        console.log(this.a);
    }
    var a = 2;
    fn();  // 2 | this 为默认的 window
    

    2. 隐式绑定

    function fn() {
        console.log(this.a);
    }
    var obj = {
        a: 2,
        obj2: obj2,
    }
    var obj2 = {
        a: 42,
        fn: fn,
    }
    obj.obj2.fn();  // 42 | this 引用上下文对象
    

    但,特别注意一点,对象的存储问题,变量只是它的指针而已,而赋值改变的是数据

    function fn() {
        console.log(this.a);
    }
    var obj = {
        a: 2,
        fn: fn,
    }
    var fn2 = obj.fn;
    fn2();  // undefined | this 此时是 window
    

    3. 显式绑定

    function fn() {
        console.log(this.a);
    }
    var obj = {
        a: 2,
    }
    fn.call(obj);  // 2 | 将上下文赋给 fn
    

    4. new 对象绑定

    function Fn(a) {
        this.a = a;
    }
    var obj = new Fn(2);
    console.log(obj.a);  // 2 | this 绑定在 Fn 上
    

      

    关于 this 的难点和误区主要有两方面,this 的引用者,与,this 的作用域

    function fn(i) {
        console.log('fn:', i);  // 2
        this.count++;  // 此处的 this 指向 window,而不是下面的 fn.count
    }
    fn.count = 0;
    for(var i=0; i<3; i++) {
        if (i>1) fn(i);
    }
    console.log(fn.count);  // 0 | fn.count 和 fn 没有半毛钱关系
    console.log(count);  // NaN | 首先 window.count 为 undefined,所以再加就是 NaN
    
    function fn1() {
        var a = 2;
        this.fn2();
    }
    function fn2() {
        console.log(this.a);  // undefined
        // 此时的 this 依然指向 window,而不是由 fn1 传递上下文
    }
    fn1();
  • 相关阅读:
    Linux之RPM 软件包管理
    软件开发模型之优缺点
    软件开发模型之迭代模型
    软件工程之软件开发模型类型
    软件开发模型之边做边改模型
    软件开发模型之螺旋模型
    软件开发模型之快速原型模型
    软件工程之软件开发模型介绍和选择
    卡内基的沟通原则
    软件开发模型之增量模型
  • 原文地址:https://www.cnblogs.com/foreverZ/p/6672325.html
Copyright © 2011-2022 走看看