js获取input输入的值（获取input输入框的内容）

2024年11月27日 14:53:39 • 投稿 • 阅读 15

本节是第四讲的第十三小节，上一节我们为大家介绍了JavaScript事件的概念，由于对象在JavaScript中有着举足轻重的作用，本节以及后面几节课将着重介绍JavaScript中的对象，本节为大家介绍JavaScrip对象的基础概念。

对象(Object)基础

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）。对象定义如下：

var objectName = {

member1Name : member1Value,

member2Name : member2Value,

member3Name : member3Value

};

以下是一个具体的实例：

var person = {

name : [‘Bob’, ‘Smith’],

age:32,

gender: ‘male’,

greeting: function() {

alert(‘Hi! I\’m ‘ + this.name[0] + ‘.’);

}};

对象成员的值可以是任意的，在我们的person对象里有数字(Number)，字符串(string)，数组(array)，函数(function)。前3个成员是资料项目，被称为对象的属性(property)，greeting成员是函数，允许对象对资料做一些操作，被称为对象的方法(method)。

点表示法(Dot notation)

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

子命名空间(Sub-namespaces)

我们将上面person对象里面的name属性改为以下形式：

name : {

first : ‘Bob’,

last : ‘Smith’

},

用一个对象来做另一个对象成员的值。其中,原先的person.name[0]和person.name[1]可表示如下：

person.name.first

person.name.last

在这里，person是命名空间，name是子命名空间。

括号表示法(Bracket notation)

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

person.age

person.name.first

等价于

person[‘age’]

person[‘name’][‘first’]

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

设置对象成员

修改原有成员的值如下：

person.age = 45

person[‘name’][‘last’] = ‘Cratchit’

创建新的成员如下：

person[‘eyes’] = ‘hazel’

person.farewell = function() { alert(“Bye everybody!”) }

Note:括号表示法一个有用的地方是它不仅可以动态的去设置对象成员的值，还可以动态的去设置成员的名字。这是使用点表示法无法做到的，点表示法只能接受字面量的成员的名字，不接受变量作为名字。

比如说，我们想让用户能够在他们的数据里存储自己定义的值类型，通过两个input框来输入成员的名字和值，通过以下代码获取用户输入的值：

var myDataName = nameInput.value

var myDataValue = nameValue.value

person[myDataName] = myDataValue

“this”的含义

以下的例子中请注意this的用法：

var person1 = {

name : ‘Chris’,

greeting: function() {

alert(‘Hi! I\’m ‘ + this.name + ‘.’);

}};

var person2 = {

name : ‘Brian’,

greeting: function() {

alert(‘Hi! I\’m ‘ + this.name + ‘.’);

}};

关键字”this”指向了当前代码运行时的对象—这里即指person对象，为什么不直接写person呢？我们开始使用构造器(constructor)时，”this”是非常有用的——它保证了当代码的上下文(context)改变时变量的值的正确性（比如：不同的person对象拥有不同的name这个属性，很明显greeting这个方法需要使用的是它们自己的name）。

就像我们之前说的，this 指向了代码所在的对象(其实代码运行时所在的对象)。在字面量的对象里this看起来不是很有用，但是当你动态创建一个对象（例如使用构造器）时它是非常有用的，之后你会更清楚它的用途。

一直在使用对象

我们学习的示例使用浏览器内建的API和JavaScript的一些对象时，我们就在使用对象，因为，这些功能是由跟我们所看到的对象同样的结构来构建的，虽然比我们自己定义的要复杂许多。

例如：myString.split(‘,’);

当你这样访问document对象时：

var myDiv = document.createElement(‘div’);

var myVideo = document.querySelector(‘video’);

以上内容部分摘自视频课程04网页游戏编程JavaScript-13对象基础，更多示例请参见网站示例。跟着张员外讲编程，学习更轻松，不花钱还能学习真本领。

js获取input输入的值（获取input输入框的内容）