zoukankan      html  css  js  c++  java
  • this指向、call、apply、bind

    // 简单来说,this总是指向它所在函数的直接调用者。this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的
    function aaa(){
        var user = 'huangrong';
        console.log(this.user);
        console.log(this);
    }
    aaa();    //undefined、window
    window.a();    //undefined、window
    
    var o = {
        user: 'qingtian',
        fn: function(){
            console.log(this.user);
            console.log(this);
        }
    }
    o.fn();    //qingtian、对象o
    window.o.fn();    //qingtian、对象o
    
    var obj = {
        a: 10,
        x: 3
        b: {
            a: 12,
            fn: function(){
                console.log(this.a);
                console.log(this.x);
                console.log(this);
            }
        }
    };
    obj.b.fn();    //12、undefined、对象b
    var j = obj.b.fn;
    j();    //undefined、undefined、window
    
    // new关键字可以改变this的指向,将这个this指向对象a
    function Fn(){
        this.user = "追梦子";
    }
    var a = new Fn();
    console.log(a.user); //追梦子
    
    // 当this碰见return,如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例
    function fn(){
        this.user = '追梦子';
        return {};    //undefined
        // return function(){};    //undefined
        // return 1; //追梦子
        // return undefined;    //追梦子
        // return null;    //追梦子
    }
    var a = new fn; 
    console.log(a.user);
    
    
    // call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加
    var a = {
        user: 'guojing',
        fn: function(x,y,z){
            console.log(this.user);
            console.log(`${x},${y},${z}`);
        }
    }
    a.fn(2,3,11);
    var b = a.fn;
    
    b.call(a,12,3,4);
    b.call(null);
    
    b.apply(a,[12,3,4]);
    b.apply(null);
    
    var c = b.bind(a,13);
    c(14,15);
    
    function aaa(){
        var name = 'guojing';
        this.user = 'huangrong';
        console.log('1==',this.name);
        console.log('2==',this.user);
        console.log('3==',this);
    }
    console.log('4==',aaa.name);
    console.log('5==',aaa.user);
    var b = new aaa();
    console.log('6==',b.name);
    console.log('7==',b.user);
    
    // 执行结果:(不难,但是你猜到了吗?)
    
    4== aaa
    5== undefined
    1== undefined
    2== huangrong
    3== aaa { user: 'huangrong' }
    6== undefined
    7== huangrong
    工欲善其事 必先利其器
  • 相关阅读:
    C#设置窗体最大化且不遮挡任务栏的方法
    C# Base64解码 二进制输出
    导出Excel并下载,但无法定制样式的方法!
    C# List 转Datatable
    查询sql语句耗时的方法!
    301跳转
    文章关键字加链接
    文本框样式默认文本
    JForum二次开发(一)
    MongoDB 学习笔记(三)—— 修改器的使用
  • 原文地址:https://www.cnblogs.com/fengyouqi/p/9553049.html
Copyright © 2011-2022 走看看