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)
    }
}

（我将在knockout或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

对象和函数之间的差异非常大，我怀疑这是你想问的问题。我假设您想知道使用对象文字语法创建的对象与使用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();

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

最后的注意事项：这个答案主要关注使用构造函数的好处，但只有当你有多个相同类型的对象并希望用它们做更复杂的事情而不是传递一些属性时才会有好处。如果你需要一些东西来封装一些属性，一个简单的对象文字很可能就足够了，你不必经历为它定义构造函数的麻烦。

什么是javascript对象符号和功能的区别

2 个答案: