《JavaScript启示录》——1.4 用户自定义/非原生对象构造函数

简介: 关于构造函数比较复杂的一点就是this值在函数内部的使用方式。请记住,构造函数只是一个饼干模具,在将它与new关键字一起使用时,它会创建一个拥有构造函数内部定义的属性和值的对象。在使用new关键字时,this值的字面意思是基于构造函数内部的语句创建的新对象/新实例。

本节书摘来自异步社区《JavaScript启示录》一书中的第1章,第1.4节,作者:【美】Cody Lindley著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.4 用户自定义/非原生对象构造函数

正如在Person()构造函数中所看到的,我们可以创建自己的构造函数,从中可以生成不只一个,而是多个自定义对象。

下面列出了熟悉的Person()构造函数:

<!DOCTYPE html><html lang="en"><body><script>
var Person = function (living, age, gender) {
    this.living = living;
    this.age = age;
    this.gender = gender;
    this.getGender = function () { return this.gender; };
};

var cody = new Person(true, 33, 'male');
console.log(cody); // 输出Object {living=true, age=33, gender="male", ...}

var lisa = new Person(true, 34, 'female');
console.log(lisa); // 输出Object {living=true, age=34, gender="female", ...}

</script></body></html>

正如你所看到的,通过传递特定的参数和调用Person()构造函数,可以轻松地创建大量的特定people对象。当需要两个或三个以上具有相同属性但具有不同值的对象时,这样做是非常有用的。细想一下,这正是JavaScript使用原生对象所发挥的作用。Person()构造函数与Array()构造函数一样也遵循同样的原则。因此new Array('foo','bar')与new Person(true, 33, 'male')确实没有多大差异。创建自定义构造函数只是在使用JavaScript本身在原生构造函数中所使用的相同的模式。

注意

  • 虽然这不是必需的,但当创建将要与new操作符一起使用的自定义构造函数时,最佳做法是保持构造函数名称的第一个字符大写:是Person(),而不是person()。
  • 关于构造函数比较复杂的一点就是this值在函数内部的使用方式。请记住,构造函数只是一个饼干模具,在将它与new关键字一起使用时,它会创建一个拥有构造函数内部定义的属性和值的对象。在使用new关键字时,this值的字面意思是基于构造函数内部的语句创建的新对象/新实例。另一方面,如果创建一个构造函数,且不使用new关键字进行调用,那么this值将引用包含该函数的“父”对象。更多细节内容请参考第6章。
  • 可以放弃使用new关键字和构造函数的概念,方法是使该函数显式地返回一个对象。必须显式地编写构建并返回Object()对象的函数:var myFunction = function(){return {prop: val}};。但是,这样做会避开原型继承的使用。
相关文章
|
14天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
14天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
1天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
11 3
|
3天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
3天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
9天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
10 0
|
9天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
16 4
|
14天前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`&#39;1.2,2,3,4,5&#39;`)转换为对象数组。通过使用`split(&#39;,&#39;)`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
|
存储 JavaScript 前端开发
|
移动开发 JavaScript 前端开发