JS基础学习第六天：JavaScript对象入门（构造函数和实例对象）

在 JavaScript 中，大多数事物都是对象, 从作为核心功能的字符串和数组，到建立在 JavaScript 之上的浏览器 API。你甚至可以自己创建对象，将相关的函数和变量封装打包成便捷的数据容器。理解这种面向对象 (object-oriented, OO) 的特性对于进一步学习 JavaScript 语言知识是必不可少的。

对象原型：

通过原型 (prototype) 这种机制，JavaScript 中的对象从其他对象继承功能特性；这种继承机制与经典的面向对象编程语言不同。本文将探讨这些差别，解释原型链如何工作，并了解如何通过 prototype 属性向已有的构造器添加方法。

对象基础

一个对象是一个包含相关资料和功能的集体（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）
如同Javascript中的很多东西一样，创建一个对象通常先定义初始化变量。尝试在您已有的文件中JavaScript代码下面输入以下内容, 保存刷新页面:
恭喜, 你刚创建了你的第一个对象. 干的漂亮! 但这是一个空对象，所以我们做不了更多的事情。像下面一样更新下我们的对象:（name和value之间用:隔开，每个键值对之间用，隔开）
保存刷新后, 尝试在你的代码或者开发者工具里面里输入下面的内容:现在在你的对象里得到了一些数据和功能（functionality），现在可以通过简单的语法访问他们了!

对象成员的值可以是任意的，在我们的person对象里有字符串(string)，数字(number)，两个数组(array)，两个函数(function)。前4个成员是资料项目，被称为对象的属性(property)，后两个成员是函数，允许对象对资料做一些操作，被称为对象的方法(method)
一个如上所示的对象被称之为对象的字面量(literal)——手动的写出对象的内容来创建一个对象。不同于从类实例化一个对象，我们会在后面学习这种方式。

点表示法

用点表示法（dot notation）来访问对象的属性和方法。对象的名字表现为一个命名空间(namespace)，它必须写在第一位——当你想访问对象内部的属性或方法时，然后是一个点(.)，紧接着是你想要访问的项目，标识可以是简单属性的名字(name)，或者是数组属性的一个子元素，又或者是对象的方法调用。如下所示：

person.age
person.interests[1]
person.bio()

子命名空间

可以用一个对象来做另一个对象成员的值。例如name成员

name: ['Bob', 'Smith'],

改成

name: {first: 'Bob',last: 'Smith'
},

这样，我们实际上创建了一个子命名空间，听起来有点复杂，但用起来很简单，你只需要链式的再使用一次点表示法，像这样：

person.name.first
person.name.last

括号表示法

另外一种访问属性的方式是使用括号表示法(bracket notation)，替代这样的代码

person['age']
person['name']['first'

这看起来很像访问一个数组的元素，从根本上来说是一回事儿，你使用了关联了值的名字，而不是索引去选择元素。难怪对象有时被称之为关联数组(associative array)了——对象做了字符串到值的映射，而数组做的是数字到值的映射。

设置对象成员

'this'的含义

greeting: function() {alert('Hi! I\'m ' + this.name.first + '.');
}

你也许想知道"this"是什么，关键字"this"指向了当前代码运行时的对象( 原文：the current object the code is being written inside )——这里即指person对象，为什么不直接写person呢？"this"是非常有用的——它保证了当代码的上下文(context)改变时变量的值的正确性（比如：不同的person对象拥有不同的name这个属性，很明显greeting这个方法需要使用的是它们自己的name）。

var person1 = {name : 'Chris',greeting: function() {alert('Hi! I\'m ' + this.name + '.');}
}var person2 = {name : 'Brian',greeting: function() {alert('Hi! I\'m ' + this.name + '.');}
}

在这里，person1.greeting()会输出："Hi! I'm Chris."；person2.greeting()会输出："Hi! I'm Brain."，即使greeting这个方法的代码是一样的。就像我们之前说的，this 指向了代码所在的对象(其实代码运行时所在的对象)。在字面量的对象里this看起来不是很有用，但是当你动态创建一个对象（例如使用构造器）时它是非常有用的，之后你会更清楚它的用途。

从零开始面向对象的程序设计

==========================

定义一个模板

首先，我们可以回到上一节拿到定义好属性和方法的Person对象。对于一个人（person）来说，我们能在他们身上获取到很多信息（他们的住址，身高，鞋码，基因图谱，护照信息，显著的性格特征等等），然而，我们仅仅需要他们的名字，年龄，性别，兴趣这些信息，然后，我们会基于他们的这些信息写一个简短的介绍关于他们自己，在最后我们还需要教会他们打招呼。以上的方式被称为抽象-为了我们编程的目标而利用事物的一些重要特性去把复杂的事物简单化

在一些面向对象的语言中，我们用类（class）的概念去描述一个对象（您在下面就能看到JavaScript使用了一个完全不同的术语）-类并不完全是一个对象，它更像是一个定义对象特质的模板。

创建一个真正的对象

从上面我们创建的class中，我们能够基于它创建出一些对象实例 - 一些拥有class中属性及方法的对象。基于我们的Person类，我们可以创建出许许多多的真实的人：

当一个对象实例需要从类中创建出来时，类的构造函数就会运行来创建这个实例。这种创建对象实例的过程我们称之为实例化-实例对象被类实例化。

构造函数和实例对象

有些人认为 JavaScript 不是真正的面向对象的语言，比如它没有像许多面向对象的语言一样有用于创建class类的声明。JavaScript 用一种称为构建函数的特殊函数来定义对象和它们的特征。构建函数非常有用，因为很多情况下您不知道实际需要多少个对象（实例）。构建函数提供了创建您所需对象（实例）的有效方法，将对象的数据和特征函数按需联结至相应对象。

不像“经典”的面向对象的语言，从构建函数创建的新实例的特征并非全盘复制，而是通过一个叫做原形链的参考链链接过去的。所以这并非真正的实例，严格的讲， JavaScript 在对象间使用和其它语言不同的机制共享特征。

一个简单的例子

让我们看看如何通过一个普通的函数定义一个”人“。在您的文件中添加以下代码:

function createNewPerson(name) {var obj = {};obj.name = name;obj.greeting = function () {alert('Hi! I\'m ' + this.name + '.');}return obj;
}

现在可以通过调用这个函数创建一个新的叫 salva 的人，在您浏览器的JavaScript console 试试：

var salva = createNewPerson('salva');
salva.name;
salva.greeting();

将之前的代码用如下代码代替：

function Person(name) {this.name = name;this.greeting = function() {alert('Hi! I\'m ' + this.name + '.');};
}

这个构建函数是 JavaScript 版本的类。您会发现，它只定义了对象的属性和方法，除了没有明确创建一个对象和返回任何值和之外，它有了您期待的函数所拥有的全部功能。这里使用了this关键词，即无论是该对象的哪个实例被这个构建函数创建，它的 name 属性就是传递到构建函数形参name的值，它的 greeting() 方法中也将使用相同的传递到构建函数形参name的值
那如何使用构造函数创建新的实例呢？

var person1 = new Person('Bob');
var person2 = new Person('Sarah');

person1.name
person1.greeting()
person2.name
person2.greeting()

现在看到页面上有两个对象，每一个保存在不同的命名空间里，当您访问它们的属性和方法时，您需要使用person1或者person2来调用它们。尽管它们有着相同的name属性和 greeting()方法它们是各自独立的，所以相互的功能不会冲突。注意它们使用的是自己的 name 值，这也是使用 this 关键字的原因，它们使用的从实参传入形参的自己的值，而不是其它的什么值。
当新的对象被创立，变量person1 和 person2 有效的包含了以下值

{name : 'Bob',greeting : function() {alert('Hi! I\'m ' + this.name + '.');}
}{name : 'Sarah',greeting : function() {alert('Hi! I\'m ' + this.name + '.');}
}

创建我们最终的构造函数

JS基础学习第六天：JavaScript对象入门（构造函数和实例对象）相关推荐

面向对象2（构造函数、实例对象、原型对象——关系理解）
参考解释: 对象原型构造函数与实例对象构造函数与实例对象关系: 实例对象是通过构造函数来创建的,创建的过程叫实例化. 示例代码: //1.自定义构造函数 function Person(name ...
javaScript基础学习 - 14 - JavaScript内置对象 -案例代码
javaScript基础学习 - 14 - JavaScript内置对象 -案例代码 1. Math对象最大值 2. 封装自己的数学对象 3. Math绝对值和三个取整方法 4. Math对象随机数方 ...
python教学视频k_GitHub - y000k/codeparkshare: Python初学者（零基础学习Python、Python入门）书籍、视频、资料、社区推荐...
PythonShare Python初学者(零基础学习Python.Python入门)书籍.视频.资料.社区推荐本文主要针对零基础想学习Python者.本文本文由@史江歌(shijiangg ...
python入门教材论坛_Python初学者（零基础学习Python、Python入门）书籍、视频、资料、社区推荐...
PythonShare ============= *Python初学者(零基础学习Python.Python入门)书籍.视频.资料.社区推荐* ------------------------ 本文 ...
python入门教材论坛_GitHub - aisuhua/codeparkshare: Python初学者（零基础学习Python、Python入门）书籍、视频、资料、社区推荐...
PythonShare Python初学者(零基础学习Python.Python入门)书籍.视频.资料.社区推荐本文主要针对零基础想学习Python者.本文本文由@史江歌(shijiangg ...
python零基础自学英语软件下载_GitHub - geniux-TI/codeparkshare: Python初学者（零基础学习Python、Python入门）书籍、视频、资料、社区推荐...
PythonShare Python初学者(零基础学习Python.Python入门)书籍.视频.资料.社区推荐本文主要针对零基础想学习Python者.本文本文由@史江歌(shijiangg ...
python教程1009python教程_GitHub - gyl1009/codeparkshare: Python初学者（零基础学习Python、Python入门）书籍、视频、资料、社区推荐...
PythonShare Python初学者(零基础学习Python.Python入门)书籍.视频.资料.社区推荐本文主要针对零基础想学习Python者.本文本文由@史江歌(shijiangg ...
廖python入门视频_GitHub - aisuhua/codeparkshare: Python初学者（零基础学习Python、Python入门）书籍、视频、资料、社区推荐...
PythonShare Python初学者(零基础学习Python.Python入门)书籍.视频.资料.社区推荐本文主要针对零基础想学习Python者.本文本文由@史江歌(shijiangg ...
python go 入门_GitHub - gochao/codeparkshare: Python初学者（零基础学习Python、Python入门）书籍、视频、资料、社区推荐...
PythonShare Python初学者(零基础学习Python.Python入门)书籍.视频.资料.社区推荐本文主要针对零基础想学习Python者.本文本文由@史江歌(shijiangg ...

JS基础学习第六天：JavaScript对象入门（构造函数和实例对象）

JS基础学习第六天：JavaScript对象入门（构造函数和实例对象）相关推荐

最新文章

热门文章