美文网首页
JS构造函数创建对象时的传参问题

JS构造函数创建对象时的传参问题

作者: JacobMa1996 | 来源:发表于2017-03-09 20:32 被阅读0次

    当对象属性为字符串时

    function User(obj){
            this.name = obj.name;
            this.password = obj.password;
    }
    var user = new User({
        name:"name",
        password:"password"
    });
    window.onload = function(){
        console.log(user);
    }
    

    通过构造函数传参的方式新建对象,并可以正确输出对象

    但是如果对象在属性值为一个对象

    function User(obj){
        this.loginInfos.name = obj.loginInfos.name;
        this.loginInfos.password = obj.loginInfos.password;
    }
    var user = new User({
        loginInfos:{
            name:"name",
            password:"password"
        }
    });
    window.onload = function(){
        console.log(user);
    }
    

    会显示**"Can not find property 'name' of undfined" ** ,就是找不到this.loginInfos这个属性,这是因为在构造函数User(obj)中,没有定义loginInfos这个属性,自然找不到loginInfos.name,那为什么前面直接定义this.name可以呢?

    javascript在全局作用域中定义的函数,是定义在Global对象中的(即浏览器的window对象),在全局作用域中调用普通函数,this就指向Global对象(window对象),我们这里说构造函数,其实在没有使用new操作符时,User(boj)就是一个普通函数,所以当它在全局作用域中不通过new操作符调用时,this.name就是window.name;

    function User(obj){
        this.name = obj.name;
        this.password = obj.password;
    }
    User({name:"name",password:"password"});
    window.onload = function(){
        console.log(window.name);//name
        console.log(window.password);//password
    }
    

    而通过new操作符创建对象,会经历以下4个步骤:
    1.创建一个新对象
    2.将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
    3.执行构造函数中的代码(为这个新对象添加属性)
    4.返回新对象
    所以如果要通过构造函数传参创建一个属性值为对象的对象,可以在构造函数定义好属性值为对象的属性,可以如下

    function User(obj){
        this.loginInfos = {};
        this.loginInfos.name = obj.loginInfos.name;
        this.loginInfos.password = obj.loginInfos.password;
    }
    var user = new User({
        loginInfos:{
            name:"name",
            password:"password"
        }
    });
    

    如此,就能解决对象的属性值为对象的传参问题了。

    相关文章

      网友评论

          本文标题:JS构造函数创建对象时的传参问题

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