js用new实例化对象与直接调用的this的区别

0.197字数 298阅读 1620

function Fun(argument1,argument2){
return this;
}
//直接调用
var f1 = Fun(); // window {}
//实例化对象
var f2 = new Fun(); // Fun {}

f1 只是调用 Fun函数,而 f2是实例化对象 Fun。两个的this指向的不是同个地方。调用函数的this指向的是window,实例化对象的this指向的是对象本身。

(构造函数的命名通常使用驼峰命名法,首字母大写,以此和普通的函数区分开来,这是一种习惯用法。)

测试例子:

function fun1(){
    //没有实例化fun1(), 直接调用,这里的this指的是window对象
    console.log(this);
    function fun2(){
         //没有实例化fun2(), 直接调用,这里的this指的是window对象
        console.log(this);
    }
    fun2();
    
    function fun3(){
         //a实例化fun3(), 这里的this指的是对象本身
        console.log(this);
    }
    var a = new fun3();
}

var f = fun1();

//输出的结果如下

>> window {}
>> window {}
>> fun3 {}

如上,f只是调用fun1,输出的第一个this是指向window的。fun2也只是调用,所以this也是指向windowde。a是实例化的对象,this指向的是fun3实例化后的对象。

如果做下面调整。

function fun1(){
    // f 实例化fun1(), 这里的this指的是fun1对象本身
    console.log(this);
    function fun2(){
        //没有实例化fun2(), 直接调用,这里的this指的是window对象
        console.log(this);
    }
    fun2();
    
    function fun3(){
         //a实例化fun3(), 这里的this指的是对象本身
        console.log(this);
    }
    var a = new fun3();
}

var f = new fun1();

//输出的结果如下

>> fun1 {} 
>> window {}
>> fun3 {}

如上,fun1跟fun3是被实例化,this指向对象本身,fun2只是调用,this指向window。

那给this的属性赋值会有什么样的结果呢?

this.alia = 'window';
this.win1 = 'window property'
function fun1(){
    this.alia = 'fun1'; 
    this.ofun1 ="only fun1 have"
    console.log("fun1的alia : " + this.alia);   //"fun1的alia :fun1"
    console.log(this.win1);   // "window property"
    
    function fun2 (){
        this.alia = 'fun2';
        console.log("fun2的alia :" + this.alia);    //"fun2的alia :fun2"
        console.log(this.ofun1); // "only fun1 have"
        console.log(this.win1);   // "window property"
        
        this.ofun1 = "fun2 change"
    
    }
    fun2();
    console.log("this.ofun1 :" +this.ofun1 );   //this.ofun1 :fun2 change
}
fun1();

调用函数里面的this属性赋值都是给window赋值的。

如果 fun1()改成 var a = new fun1(); 呢?

this.alia = 'window';
this.win1 = 'window property';
var a = new fun1();

function fun1(){
    //fun1内的this指的是 a 对象,是fun1{};

    this.alia = 'fun1'; 
    this.ofun1 ="only fun1 have"
    console.log("fun1的alia : " + this.alia);   //"fun1的alia :fun1"
    console.log(this.win1);   // "undefine"
    
    function fun2 (){
        // this指的是window。
        //window没有ofun1属性,所以输出了undefine
        console.log(this.ofun1); // "undefine"
        
        //下面都是window已有的属性
        console.log("fun2的alia :" + this.alia);    //"fun2的alia :window"
        console.log(this.win1);   // "window property"
        
        //给window添加ofun1属性
        this.ofun1 = "change in fun2"
        
    }
    fun2();
    // 这时this 是 a对象本身的fun1{}
    console.log("this.ofun1 :" +this.ofun1 );   //this.ofun1 :only fun1 have
    
    //window.ofun1刚刚已经在fun2里面赋值了,所以输出有值
    console.log("window.ofun1 :" +window.ofun1 );   //window.ofun1 :change in fun2
}

大家仔细看看输出的结果。

推荐阅读更多精彩内容