javascript对象表示法和函数有什么区别[重复]答案

【问题标题】：what is difference javascript object notation and function [duplicate]javascript对象表示法和函数有什么区别[重复]
【发布时间】：2014-03-27 09:50:06
【问题描述】：

我想了解两种情况下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 工具中使用它。）

【问题讨论】：

主要区别是第一个是SearchGuide类的构造函数（可以用new SearchGuide();做一个实例），第二个已经是Object类的实例

标签： javascript

【解决方案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

【讨论】：

【解决方案2】：

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

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();

可以通过使用克隆函数或从基础对象继承来缓解这种差异，具体取决于具体情况。

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

【讨论】：