html - javascript 使用new关键字的区别

Question

以下两种方式的区别在哪里？

---

第一种方式使用new关键字以原型的方式将user对象暴露到window对象中

javascript//one
var user = function(){
    this.name="";
    this.id="";
};
user.add = function(){
    console.log("add");
};
user.delete = function(){
    console.log("delete");
};
user.prototype = user;
window.user = new user();

第二种方式不使用new关键字直接将user对象暴露到window对象中

javascript//two
var user = {
    name:"",
    id:""
};
user.add = function(){
    console.log("add");
};
user.delete = function(){
    console.log("delete");
};
window.user = user;

使用

html<button onclick="user.add()">增加</button>
<button onclick="user.delete()">删除</button>

提问
既然不使用new也能达到同样的目的是不是使用new关键字就没有意义了？这两种写法的真正区别到底是什么？

ps，没想到sf还支持markdown。哈哈。。。
$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

Answer 1

@qianjiahao
谢谢了，明白啦。
还有一个疑问，通常：

flowst=>start: 开始
e=>end: 结束
open=>operation: 打开页面
load=>operation: 加载js文件，初始化js对象
close=>operation: 关闭页面
destory=>operation: 销毁js对象

st->open->load->close->destory->e

从打开->加载->关闭->销毁,这整个过程中对象初始化都只需要执行一次，换句话说new关键字只出现过一次。那么在什么场景下才需要用到构造函数实例化对象的方式呢？按我的想法和经验用对象字面量来制造对象的方式几乎能满足所有的场景。

谢谢了。

Answer 2

第一种

- 可以称为 用构造函数实例化对象
- 每一个实例都是构造函数的副本，但是实例改变不会影响构造函数本身 
- 实例的构造器属性指向构造函数本身


function Animal(type){
    this.type = type;
    this.log = function(){
        console.log(this.type);
    }
}

var cat = new Animal('cat');         // 实例化 cat 对象
cat.log();                           // cat
cat.log = function(){                // 修改 log 方法
    console.log('this is ',this.type); 
}
cat.log();                           // this is  cat

var dog = new Animal('dog');         // 实例化 dog 对象
dog.log();                           // dog 

实例dog的log方法并没有被cat的log影响

console.log(cat.constructor === Animal);   // true
console.log(dog.constructor === Animal);   // true

第二种

- 可以称为 用对象字面量来制造对象
- 每一个对象都指向对象字面量的引用，改变对象会修改对象字面量的引用，会将改变作用到所有的被制造的对象上
- 对象构造器属性指向Object对象

var obj = {
    title:'obj'
}

var a = obj;
var b = obj;

console.log(a.title);                // obj
console.log(b.title);                // obj

a.title = 'a';

console.log(a.title);                // a
console.log(b.title);                // a
console.log(obj.title);              // a

b.title = 'other';

console.log(a.title);                // other
console.log(b.title);                // other
console.log(obj.title);              // other

console.log(a.constructor === obj);  // false
console.log(b.constructor === obj);  // false

修改被制造的对象，会影响基础对象和其他被制造的对象

Answer 3

window也是实例化的对象，和new一样，只是作用域不一样