zoukankan      html  css  js  c++  java
  • js中的this

    # 隐式绑定,this会根据调用时候的上下文,来判断自身代表什么!

    function foo() {
    	console.log( this.a );
    }
    var obj = {
    	a: 2,
    	foo: foo
    };
    obj.foo(); // 2
    var foo2 = obj.foo;
    foo2();//undefined
    

     #显式绑定,call,apply

    function foo() {
        console.log( this.a );
    }
    var obj = {
        a:2
    };
    foo.call( obj ); // 2
    

       读代码吧,一般函数默认回传this和arguments,

    function foo(something) {
    console.log( this.a, something );
        return this.a + something;
    }
    // 简单的辅助绑定函数
    function bind(fn, obj) {
        return function() {//js函数的arguments 默认回传的。
            return fn.apply( obj, arguments );
        };
    }
    var obj = {
        a:2
    };
    var bar = bind( foo, obj );
    var b = bar( 3 ); // 2 3
    console.log( b ); // 5
    

     暴力硬绑定。

    function foo(something) {
    console.log( this.a, something );
    return this.a + something;
    }
    
    var obj = {
    a:2
    };
    var bar = foo.bind( obj );
    var b = bar( 3 ); // 2 3
    console.log( b ); // 5
    

     #用New创建对象时的this

    function foo(a) {
    this.a = a;
    }
    var bar = new foo(2);
    console.log( bar.a ); // 2
    

    #区分以下2个this

    function Plane(){
    	this.drive = function (){
    		console.log("I am plane");
    	}
    }
    function Car() {
    	console.log(this);//这个this是Car
    	let plane = new Plane();
    	let vehDrive = plane.drive;
    	plane.drive = function() {
    		vehDrive.call(this);//函数体里的这个this代表调用者,plane,在#$%^处调用的
    		console.log(
    			"Rolling on all " + " wheels!"
    		);
    	}
    	this.drive = function(){
    		plane.drive();//#$%^
    	}
    }
    var myCar= new Car();
    myCar.drive();
    

    #箭头函数是个例外,他不是调用时候的上下文,而是等效于多了一个bind函数

    function foo() {
        // 返回一个箭头函数
        return (a) => {
            //this 继承自foo()
            console.log( this.a );
        };
    }
    var obj1 = {
        a:2
    };
    var obj2 = {
        a:3
    };
    var bar = foo.call( obj1 );
    bar.call( obj2 ); // 2, 不是3 !
    
  • 相关阅读:
    MySQL 连接 触发器 函数 视图 存储过程
    Django的ORM2
    nmp安装vuejs
    Docker 技术入门与实践(第3版)笔记
    docker官方 入门
    centos 各目录介绍
    阿里云es 安装docker
    linux命令
    centos 7 mini 安装青岛OJ
    leetcode_304. 二维区域和检索
  • 原文地址:https://www.cnblogs.com/dongfangchun/p/9706836.html
Copyright © 2011-2022 走看看