《深入理解JavaScript》——1.14 对象和构造函数

简介:

本节书摘来自异步社区《深入理解JavaScript》一书中的第1章,第1.14节,作者: 【美】AxelRauschmayer(罗彻麦尔)译者: 王玉林 , 杜欢 , 庄婷婷 , 章子鹏,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.14 对象和构造函数

本节涵盖了JavaScript两种基础的面向对象机制:单一对象和构造函数(类似其他语言中对象的工厂方法)。

1.14.1 单一对象
和所有的值一样,对象也具有属性。你可以认为对象是一组属性的集合,事实也是如此,每个属性都是一个(键,值)对。键名都是字符串,而值可以是JavaScript的任意值。

在JavaScript中,可以直接通过对象字面量去创建普通对象:

  screenshot

上述对象具有name和describe两个属性。你可以获取(get)以及设置(set)这些属性:

  screenshot

以函数作为值的属性被称为方法,如describe。它们使用this对调用它们的对象进行引用:

  screenshot

使用in运算符检查属性是否存在:

  screenshot

如果读取一个不存在的属性,会得到undefined。因此,之前的两个检查可以这样执行:

  screenshot

使用delete运算符移除属性:

  .screenshot

1.14.2 任意属性名
属性的键名可以是任何字符串。迄今为止,我们见到过对象字面量中的属性名和点运算符后的属性名。然而,只有当它们是标识符的时候才可以这样使用(参见1.3.3“标识符与变量名”)。如果想用其他的字符串作为属性名,则必须将它们用引号引起来,再通过对象字面量和方括号来获取或设置这个属性:

screenshot

方括号可以用来动态计算属性键名:

  screenshot

1.14.3 提取方法
如果对方法进行提取,则会失去与对象的连接。就这个函数而言,它不再是一个方法,this的值也会是undefined(在严格模式下)。

看如下示例,先回到之前的jane对象:

  screenshot

我们要从jane对象中提取describe方法,将它赋值给变量func,然后对它进行调用。你会发现,它不能正常运行:

  screenshot

处理这个问题的解决方案可以使用bind()方法,所有函数都支持。它会创建一个this总是指向给定值的新函数:

  screenshot

1.14.4 方法中的函数
所有函数都有其特殊的this变量。如果在方法中有嵌套函数,这可能会不太方便,因为在嵌套函数内部不能访问方法中的this变量。下面这个例子展示了调用forEach并结合一个函数来遍历数组:

  screenshot

调用logHiToFriends会产生一个错误:

 screenshot

让我们来看看这个问题的两种解决方法。第一种,我们可以将this保存在不同的变量中:

  screenshot

第二种,利用forEach的第二个参数,它可以给this指定一个值:

  screenshot

函数表达式在JavaScript中通常被当作函数调用中的参数来使用。在这些函数表达式中引用this时要特别小心。

1.14.5 构造函数:对象工厂
到现在为止,JavaScript对象字面量表现出的那种类似于其他语言中映射表/字典的印象,可能会使你觉得JavaScript对象仅仅是字符串到值的映射。然而,JavaScript对象也支持真正的面向对象:继承。本节不会去完全解释JavaScript的继承是如何工作的,而会展示一种简单的模式让你快速上手。想了解更多详情,请查看第17章。

除了“真正的”函数和方法,函数在JavaScript中还扮演了另外一个角色:如果用new运算符来调用的话,它们将变成构造函数即对象工厂。构造函数就是这样简单地模拟了其他语言的类。按照惯例,构造函数的名称以大写字母开头。例如:

  screenshot

可以看到构造函数包含两部分。第一部分,Point函数设置实例数据。第二部分,Point.prototype属性包含一个带有方法的对象。第一部分里的实例数据是特定于每一个实例的,而之后的方法数据则是对所有实例共享的。

可以通过new运算符来使用Point:

  screenshot

p是Point的一个实例:

  screenshot

相关文章
|
3月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
3月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
3月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
37 1
JavaScript中对象的数据拷贝
|
3月前
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
48 1
|
3月前
|
存储 前端开发 JavaScript
JavaScript常用的内置构造函数
JavaScript提供的内置构造函数在数据处理、对象创建、异常处理和异步操作等方面发挥了重要作用。掌握这些构造函数及其用法,对于开发高效、可靠的JavaScript应用至关重要。通过合理使用这些内置构造函数,开发者可以更好地管理和操作各种类型的数据,提升开发效率和代码质量。
32 1
|
3月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
4月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
64 4
|
4月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
43 2
|
4月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
69 1
|
4月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
56 2

热门文章

最新文章