javascript对象表示法和函数的区别是什么

Question

我想了解两种情况下javascript函数和对象表示法之间的区别。

定义-1

function SearchGuide() {
this.searchTerm = '';
this.searchBoxPlaceholder = 'Search...';
this.isSearching = false;
this.searchAddress = function(){
console.log(this.searchTerm)
};
}

定义-2

var SearchGuide = {
searchTerm : '',
searchBoxPlaceholder : 'Search...',
isSearching : false,
searchAddress : function(){
console.log(this.searchTerm)
}
}

(我会在敲除或angularjs MVC工具中使用这个。)

Answer 1

在定义1中，您定义了一个要作为构造函数调用的函数。您可以使用new SearchGuide()创建SearchGuide的多个实例。

在定义2中，您正在创建Object的实例：您不能创建重用该代码的第二个实例。注意，这个实例是Object，但它不是SearchGuide实例：

function SearchGuide() {
this.searchTerm = '';
this.searchBoxPlaceholder = 'Search...';
this.isSearching = false;
this.searchAddress = function(){
console.log(this.searchTerm)
};
}
var sg= new SearchGuide();
sg instanceof SearchGuide //true

但有了第二个定义：

var SearchGuide = {
searchTerm : '',
searchBoxPlaceholder : 'Search...',
isSearching : false,
searchAddress : function(){
console.log(this.searchTerm)
}
}
SearchGuide instanceof Object //true
Searguide instanceof SearchGuide //TypeError: object is not a function

Answer 2

对象和函数之间的差异非常显著，我怀疑这是否是您想要问的。我假设你想知道用对象文字语法创建的对象和用带有函数的新运算符创建的对象之间的区别：

var objectLiteral = { 
a : 1, 
b : function(){} 
}
function FooConstructor = function(){
this.a = 1;
this.b = function(){};
}
var constructedObject = new FooConstructor();

差异：

JavaScript中的每个对象都有一个内部[[Prototype]]属性，可通过使用object.getPrototypeOf(obj)进行访问，从中"继承"属性。上述两个对象的属性不同：

Object.getPrototypeOf(objectLiteral) === Object.prototype
Object.getPrototypeOf(constructedObject) === FooConstructor.prototype

这意味着，如果你要定义

FooConstructor.prototype.bar = 42;
console.log(objectLiteral.bar) // undefined
console.log(constructedObject.bar) // 42

当向许多类似的对象添加只读属性(通常只读属性是方法)时，这种方法通常非常有用，可以节省内存。

由于相同的[[Prototype]]差异，instanceof运算符的行为不同：

constructedObject instanceof FooConstructor // true
objectLiteral instanceof FooConstructor // false

定义对象的两种方法之间的另一个区别是，定义具有相同特征的第二个对象有多容易：

var anotherLiteral = {
a : 1, 
b : function(){} 
}
var anotherConstructed = new FooConstructor();

根据具体情况，可以通过使用克隆函数或从基本对象继承来减轻这种差异。

最后一点：这个答案侧重于使用构造函数的好处，但只有当你有多个相同类型的对象，并且你想用它们做比传递几个属性更复杂的事情时，这些好处才会出现。如果你需要一些东西来封装一些属性，一个简单的对象文字很可能就足够了，而且你不必为它定义构造函数