首页 新闻 会员 周边 捐助

关于JS工厂模式和构造函数模式创建对象的一个细节问题。

0
悬赏园豆:10 [待解决问题]

JS高级程序设计中的工厂模式

   function createPerson(name,age,job){

    var o=new Object();
    o.name=name;
    o.age=age;
    o.job=job;
    o.sayName=function(){
    alert(this.name);
     };
    return o;
}
var person1=createPerson("Nicholas",29,"software Engineer");
var person2=createPerson("Greg",27,"Doctor");

 

在这里,如果console.log(person1);编会打印出来person1,这没有问题。

下面来看一下构造函数模式。

function Person(name,age,job){

    
    this.name=name;
    this.age=age;
    this.job=job;
    this.sayName=function(){
    alert(this.name);
     };
    
}
var person1=new Person("Nicholas",29,"software Engineer");
var person2=new Person("Greg",27,"Doctor");

下面我的问题来了,在构造函数模式中,使用了this,它指向了引用它的新对象也就是person1和person2;

我困惑的是,如果把工厂模式中的为属性赋值时用的o换成this为什么不可以?调用createPerson时返回的return o不也指向了新对象person1吗?此时this.name等不也是设置person1的name属性吗?但是我在使用了this之后,在控制台再次用console.log(person1),却打印出了一个空对象。有哪位大神帮我解答一下吗?

 

 

 

 

 

buctwbzs的主页 buctwbzs | 初学一级 | 园豆:149
提问于:2016-09-22 22:33
< >
分享
所有回答(5)
2

函数的调用方式不一样,this 指向的值也是不一样的,

函数 createPerson 是常规调用方式,this 指向的是全局对象,在浏览器环境中就是 window

函数 Person 是构造函数方式调用,this 指向的是生成的那个对象

你可以在两个函数中 console.log(this) 查看,便知

by.Genesis | 园豆:2824 (老鸟四级) | 2016-09-23 09:24
0

this在浏览器下,谁调用就是谁,没人调用就是window。

幻天芒 | 园豆:37207 (高人七级) | 2016-09-23 13:18
0

var person1=createPerson("Nicholas",29,"software Engineer");

var person1=new Person("Nicholas",29,"software Engineer");

区别在这两句话中,你可以看到第一个语句里面没有new关键字,直接执行一个函数;而第二个表达式中有new,也就是说是新实例化了一个对象。

JS中关于this的定义是:函数直接在全局中执行,那么this指向的是全局对象window。也就是说你在createPerson中new了一个o,但是你再执行this.name=name那么就等于是执行了window.name=name,o对象本身不会有任何印象,最后你return了o也只是得到了一个空对象。

而JS中执行了new之后,等于通过构造函数创建了一个新对象,那么这个构造函数中的this也就指向了这个新实例化的对象,此时this.name=name修改了新对象person1中的name值。

关于对象实例化的知识和this指向的问题题主还多翻一翻博客园的文章,讲的很详细,从长久发展来看先打好基础对你以后的道路更有好处。

望采纳。

刘冰0117 | 园豆:102 (初学一级) | 2016-09-23 15:48
0

首先更正一下,这里不是this的问题而是一个返回值的问题,我不知道你所谓的工厂模式指的是什么,如果有什么含义可以沟通一下。

正题:

  你第一个构造函数里面带有了返回值o,并且对其赋值了,而第二个你只是对函数属性赋值了,且没有任何返回值,一个函数在没有返回值的情况下的默认返回值是undefined。其实不管是person1、person2

var 任何变量=new Person(参数);//所存储的值都只是new Person(参数)的返回值而已。

当然你的new Person(参数)和Person(参数)是同一个意思。

************************************************希望对你有用。

张云山 | 园豆:642 (小虾三级) | 2016-09-27 09:36
1

 

 

this四种绑定方式1.默认绑定;2.隐式绑定;3.显示绑定;4.new绑定。如果把o改为this后①如果直接调用createPerson,则应用默认绑定,this被绑定到全局对象(非严格模式)②如果使用new调用createPerson,则this被绑定到new创建的对象。

可以参考《你不知道的JavaScript》或JavaScript秘密花园,里面有提到this绑定的几种情况。

 

 

Mr.czar | 园豆:202 (菜鸟二级) | 2016-09-28 13:21
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册