zoukankan      html  css  js  c++  java
  • [js]this和call.call

    JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。
    https://www.cnblogs.com/coco1s/p/4833199.html

    this即1,作用域 2,context 3,环境

    //按照原型链查找机制往上级作用域找
        var name = 'maotai';
        var obj = {
            fn: function () {
                console.log(name);
            }
        };
        obj.fn();
    
    //输出maotai
    
    //this限制了执行环境
        var name = 'maotai';
        var obj = {
            fn: function () {
                console.log(this.name);
            }
        };
        obj.fn();
    
    //undefined
    

    但是我在学es6的时候

    //对象不是作用域
    // let a = 10;
    // let obj = {
    //     a: 20,
    //     f: function () {
    //         console.log(a);
    //     }
    // };
    // obj.f();
    
    

    call的使用规则

        function fn2() {
            console.log("fn2 this: " + this);
        }
    
        fn2.call(); //fn2 this: [object Window]
    
        function Fn(x, y) {
            console.log(arguments); //实参集,类数组
            console.log(this);
        }
    
        var obj = {'name': 'maotai'};
        Fn.call(obj, 1, 2);
    
    Fn.call();          //window
    Fn.call(null);      //window
    Fn.call(undefined); //window
    Fn.call(obj, 1, 2); //obj
    

    把Fn放到obj环境执行.

    • 例子1: Fn.call
        function Fn() {
            console.log(this.name); 
        }
        var obj = {name:'maotai'};
        Fn.call(obj);//Fn中的this被改成了obj
    
    • 例子2: 输出f2
        function f1() {
            console.log('f1');
        }
    
        function f2() {
            console.log('f2');
        }
    
        f2.call(f1); //输出f2
    
    function fn1() {
        console.log("fn1 this: " + this);
    }
    
    function fn2() {
        console.log("fn2 this: " + this);
    }
    
    fn1.call.call.call(fn2);
    
    1:这个方法是在哪开始执行的 call(fn2)
    
    2:执行后的结果是什么 call(fn2) 前面的this 改成了fn2 前面方法照常执行
    
    3:call(fn2) 前面是什么,改变this 后会怎样 call(fn2)
        前面是fn1.call 改变this后 由于fn1是这次的行为主体(this),
        是他执行了call 方法,所以fn1 被call(fn2)变成了 fn2,所以接下来执行的就是 fn2.call()
    
    4:输出 fn2 this: [object Window]
    

    this的5种情况总结:
    https://www.cnblogs.com/iiiiiher/articles/9813889.html

    1. 点前是谁就是谁
    2. 自执行函数
    3. 获取元素节点
    4. 回调函数
    5. call,apply,bind
    
  • 相关阅读:
    maven pom 详细配置
    寻找二叉树最远的叶子结点
    控制两个线程的启动顺序
    tensorflow之神经网络实现流程总结
    ubuntu服务器安装FTP服务
    ubuntu服务器 安装 seafile 个人网盘
    软件工程实践总结作业~
    Beta 答辩总结
    Beta 冲刺 (7/7)
    Beta 冲刺 (6/7)
  • 原文地址:https://www.cnblogs.com/iiiiiher/p/9811925.html
Copyright © 2011-2022 走看看