美文网首页
js用new实例化对象与直接调用的this的区别

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

作者: Joyanceh | 来源:发表于2017-05-11 16:42 被阅读0次

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
}

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

相关文章

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

    function Fun(argument1,argument2){return this;}//直接调用var ...

  • python------new方法及其他

    一、单例模式new与init的区别:__new:创建实例对象时调用的构造方法init:初始化方法,用于设置实例的相...

  • 单例

    一、单例模式new与init的区别:__new:创建实例对象时调用的构造方法init:初始化方法,用于设置实例的相...

  • 关于spring,总结了一篇上万字的图文笔记,不管你工作几年都应

    spring bean的实例化 构造器实例化 静态工厂实例化 容器创建对象,不直接调用对象构造方法,而是调用静态工...

  • JS基础核心之原型

    构造函数与实例 构造函数与普通函数的唯一区别:调用方式的不同,构造函数用new调用。 new的内部经历了什么? 创...

  • 对象的相关概念和方法

    对象的概念 因为js中没有真正类的概念. js的实例对象都是通过函数的构造函数调用生成的(new), 对象和对象...

  • Java 基础

    类和对象 对象:对象是类的一个实例,有状态和行为。 创建对象:声明,new 实例化,调用构造方法初始化对象。 类:...

  • JVM06 Java中对象的内存是如何布局的?

    Java中创建对象的方式 new -通过调用构造器来初始化实例字段反射-通过调用构造器来初始化实例字段Object...

  • JNI回调更新UI的方法

    jni.c中 MainActivity中 c调用java实际是反射实例化,更新UI的时候不能实例化因为new的对象...

  • js中string常用方法

    实例方法---->必须要通过new的方式创建的对象(实例对象)来调用的方法 静态方法---->直接通过大写的构造函...

网友评论

      本文标题:js用new实例化对象与直接调用的this的区别

      本文链接:https://www.haomeiwen.com/subject/zqootxtx.html