JavaScript中工厂函数与构造函数示例详解

当谈到JavaScript语言与其他编程语言相比时,你可能会听到一些令人困惑东西,其中之一是工厂函数和构造函数。

工厂函数

所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例”。意思就是当我调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象。由于 Javascript 本身不是严格的面向对象的语言(不包含类),实际上来说,Javascript 并没有严格的“工厂函数”,但是在 Javascript中,我们能利用函数模拟类。来看下面一个例子:

function person(firstName, lastName, age) { const person = {}; person.firstName = firstName; person.lastName = lastName; person.age = age; return person; }

上述代码,创建一个新对象,并将传递参数作为属性附加到该对象上并返回新对象。 这是一个简单的 JavaScript 工厂函数。

实际上工厂函数也很好理解了:

它是一个函数。

它用来创建对象。

它像工厂一样,“生产”出来的函数都是“标准件”(拥有同样的属性)

构造函数

不同于其它的主流编程语言,JavaScript的构造函数并不是作为类的一个特定方法存在的;当任意一个普通函数用于创建一类对象时,它就被称作构造函数,或构造器。一个函数要作为一个真正意义上的构造函数,需要满足下列条件:

在函数内部对新对象(this)的属性进行设置,通常是添加属性和方法。

构造函数可以包含返回语句(不推荐),但返回值必须是this,或者其它非对象类型的值。

function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; }

使用 new 关键字创建对象

正如上面所说的,我们可以使用 new 来类或者对象,那么你可能会有以下几个问题:

我们可以在工厂函数中使用 new 关键字吗?

如果我们在工厂和构造函数中使用new关键字会发生什么

如果在使用构造函数创建对象实例时不使用new关键字会发生什么

好的,试着找出以上问题的答案之前,我们先做一个小练习来理解这里面发生了什么。

使用new关键字同时使用工厂和构造函数创建两个对象,接着在控制台打印这两个对象。

使用工厂函数

function person(firstName, lastName, age){ const person = {} person.firstName = firstName; person.lastName = lastName; person.age = age; return person; } const mike = new person('mike', 'grand', 23);

JavaScript中工厂函数与构造函数示例详解

正如我们在上述所看到的,这里的__proto__ 指向其原型对象的指针,让我们试着找出原型对象是什么。为了找出上面mike对象的指向原型对象,让我们做简单的===等式检查。

JavaScript中工厂函数与构造函数示例详解

嗯,有趣的是,它指向 Object.prototype。好的,让我们用构造函数做同样的实验。

理解 JavaScript 的原型

理解原型之前,需要记住以下几点知识:

所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性(null除外)

所有的引用类型(数组、对象、函数),都有一个__proto__属性,属性值是一个普通的对象

所有的函数,都有一个prototype属性,属性值也是一个普通的对象

所有的引用类型(数组、对象、函数),__proto__属性值指向它的构造函数的prototype属性值

通过代码解释一下:

// 要点一:自由扩展属性 var obj = {}; obj.a = 100; var arr = []; arr.a = 100; function fn () {} fn.a = 100; // 要点二:__proto__ console.log(obj.__proto__); console.log(arr.__proto__); console.log(fn.__proto__); // 要点三:函数有 prototype console.log(fn.prototype) // 要点四:引用类型的 __proto__ 属性值指向它的构造函数的 prototype 属性值 console.log(obj.__proto__ === Object.prototype)

使用构造函数

注意:在JavaScript中,这些构造函数也被称为 constructor,因为它们用于创建对象。

function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; } const mike = new Person('mike', 'grand', 23);

JavaScript中工厂函数与构造函数示例详解

当我们展开第一层的的__proto__时,它内部还有另一个__proto__,我们再次扩展它。

JavaScript中工厂函数与构造函数示例详解

现在让我们试着弄清楚原型对象是否像上面一样。

JavaScript中工厂函数与构造函数示例详解

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/16ed3c9269107a38fa2fcb9c68372aba.html