当前位置: 技术文章>> javascript高级编程之详细讲解javascript中的对象

文章标题:javascript高级编程之详细讲解javascript中的对象
  • 文章分类: 前端
  • 25910 阅读

第 4 章介绍了 JavaScript 的对象(object)。 在编程文化中,我们有一个名为面向对象编程(OOP)的东西,这是一组技术,使用对象(和相关概念)作为程序组织的中心原则。

虽然没有人真正同意其精确定义,但面向对象编程已经成为了许多编程语言的设计,包括 JavaScript 在内。 本章将描述这些想法在 JavaScript 中的应用方式。

封装

面向对象编程的核心思想是将程序分成小型片段,并让每个片段负责管理自己的状态。

通过这种方式,一些程序片段的工作方式的知识可以局部保留。 从事其他方面的工作的人,不必记住甚至不知道这些知识。 无论什么时候这些局部细节发生变化,只需要直接更新其周围的代码。

这种程序的不同片段通过接口(interface),函数或绑定的有限集合交互,它以更抽象的级别提供有用的功能,并隐藏它的精确实现。

这些程序片段使用对象建模。 它们的接口由一组特定的方法(method)和属性(property)组成。 接口的一部分的属性称为公共的(public)。 其他外部代码不应该接触属性的称为私有的(private)。

许多语言提供了区分公共和私有属性的方法,并且完全防止外部代码访问私有属性。 JavaScript 再次采用极简主义的方式,没有。 至少目前还没有 - 有个正在开展的工作,将其添加到该语言中。

即使这种语言没有内置这种区别,JavaScript 程序员也成功地使用了这种想法。 通常,可用的接口在文档或数字一中描述。 在属性名称的的开头经常会放置一个下划线(_)字符,来表明这些属性是私有的。

将接口与实现分离是一个好主意。 它通常被称为封装(encapsulation)。

方法

方法不过是持有函数值的属性。 这是一个简单的方法:

let rabbit = {};rabbit.speak = function(line) {  console.log(`The rabbit says '${line}'`);};rabbit.speak("I'm alive.");// → The rabbit says 'I'm alive.'

方法通常会在对象被调用时执行一些操作。将函数作为对象的方法调用时,会找到对象中对应的属性并直接调用。当函数作为方法调用时,函数体内叫做this的绑定自动指向在它上面调用的对象。

function speak(line) {  console.log(`The ${this.type} rabbit says '${line}'`);}let whiteRabbit = {type: "white", speak: speak};let fatRabbit = {type: "fat", speak: speak};whiteRabbit.speak("Oh my ears and whiskers, " +                  "how late it's getting!");// → The white rabbit says 'Oh my ears and whiskers, how//   late it's getting!'hungryRabbit.speak("I could use a carrot right now.");// → The hungry rabbit says 'I could use a carrot right now.'

你可以把this看作是以不同方式传递的额外参数。 如果你想显式传递它,你可以使用函数的call方法,它接受this值作为第一个参数,并将其它处理为看做普通参数。

speak.call(hungryRabbit, "Burp!");// → The hungry rabbit says 'Burp!'

这段代码使用了关键字this来输出正在说话的兔子的种类。我们回想一下applybind方法,这两个方法接受的第一个参数可以用来模拟对象中方法的调用。这两个方法会把第一个参数复制给this

由于每个函数都有自己的this绑定,它的值依赖于它的调用方式,所以在用function关键字定义的常规函数中,不能引用外层作用域的this

箭头函数是不同的 - 它们不绑定他们自己的this,但可以看到他们周围(定义位置)作用域的this绑定。 因此,你可以像下面的代码那样,在局部函数中引用this

function normalize() {  console.log(this.coords.map(n => n / this.length));}normalize.call({coords: [0, 2, 3], length: 5});// → [0, 0.4, 0.6]

如果我使用function关键字将参数写入map,则代码将不起作用


推荐文章