JavaScript 教程

JS 教程 JS 简介 JS 如何使用 JS 输出 JS 语句 JS 语法 JS 注释 JS 变量 JS 运算符 JS 算法 JS 赋值 JS 数据类型 JS 函数 JS 对象 JS 事件 JS 字符串 JS 字符串方法 JS 数值 JS 数值方法 JS 数组 JS 数组方法 JS 数组排序 JS 数组迭代 JS 日期 JS 日期格式 JS 日期获取方法 JS 日期设置方法 JS 数学运算 JS 随机数 JS 布尔运算符 JS 比较运算符 JS 条件语句 JS Switch 语句 JS For 循环 JS While 循环 JS Break JS 类型转换 JS 位运算符 JS 正则表达式 JS 错误处理 JS 作用域 JS Hoisting JS 严格模式 JS this 关键词 JS Let 关键词 JS Const 关键词 JS 箭头函数 JS 类 JS 调试 JS 样式指南 JS 最佳实践 JS 常见错误 JS 性能优化 JS 保留关键词 JS 版本 JS ES5 JS ES6 JS JSON

JS 表单

JS Forms Forms API

JS 对象

Object 对象定义 Object 对象属性 Object 对象方法 Object Display Object 对象访问器 Object 对象构造器 Object 对象原型 Object ECMAScript 5

JS 函数

JS 函数定义 JS 函数参数 JS 函数调用 JS Call 函数 JS Apply 函数 JS 函数闭包

JS 类库

Class 类简介 Class 类继承 Class Static

JS 异步

JS 回调 JS 异步 JS Promises JS Async/Await

JS HTML DOM

DOM 简介 DOM 方法 DOM 文档 DOM 元素 DOM HTML DOM CSS DOM 动画 DOM 事件 DOM 事件监听 DOM 导航 DOM 节点 DOM 集合 DOM 节点列表

JS 浏览器 BOM

JS Window JS Screen JS Location JS History JS Navigator JS 弹出框 JS Timing JS Cookies

JS AJAX

AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 实例

JS JSON

JSON 简介 JSON 语法 JSON vs XML JSON 数据类型 JSON 解析 JSON 字符串化 JSON 对象 JSON 数组 JSON PHP JSON HTML JSON JSONP

JS Web APIs

Web API 简介 Web History API Web Storage API Web Geolocation API

JS vs jQuery

jQuery 选择器 jQuery HTML jQuery CSS jQuery DOM

JS 实例

JS 实例 JS HTML DOM JS HTML 输入 JS HTML 对象 JS HTML 事件 JS Browser JS 编辑器 JS 练习 JS 测验

JS 参考手册

JS 对象 HTML DOM 对象



JavaScript 对象构造器

实例

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}
Try it yourself »

用大写首字母对构造器函数命名是个好习惯。


对象类型(蓝图)(类)

前一章的实例是有限制的。它们只创建单一对象。

有时我们需要创建相同"类型"的许多对象的"蓝图"。

创建一种"对象类型"的方法,是使用对象构造器函数

在上面的例子中,function Person() 就是对象构造器函数。

通过 new 关键词调用构造器函数可以创建相同类型的对象:

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
Try it yourself »


this 关键词

在 JavaScript 中,被称为 this 的事物是代码的"拥有者"。

this 的值,在对象中使用时,就是对象本身。

在构造器函数中,this 是没有值的。它是新对象的替代物。 当一个新对象被创建时,this 的值会成为这个新对象。

请注意 this 并不是变量。它是关键词。您无法改变 this 的值。


为对象添加属性

为已有的对象添加新属性很简单:

实例

myFather.nationality = "English";
亲自试一试 »

新属性被添加到 myFather。不是 myMother,也不是任何其他 person 对象。


为对象添加方法

为已有的对象添加新方法很简单:

实例

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};
亲自试一试 »

新方法被添加到 myFather。不是 myMother,也不是任何其他 person 对象。


为构造器添加属性

与向已有对象添加新属性不同,您无法为对象构造器添加新属性:

实例

Person.nationality = "English";
亲自试一试 »

如需向构造器添加一个新属性,您必须添加到构造器函数:

实例

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}
亲自试一试 »

这样对象属性就可以拥有默认值。


为构造器添加方法

您的构造器函数也可以定义方法:

实例

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.name = function() {return this.firstName + " " + this.lastName;};
}
亲自试一试 »

与向已有对象添加新方法不同,您无法为对象构造器添加新方法。

必须在构造器函数内部向一个对象添加方法:

实例

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName; 
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  };
}

changeName() 函数把 name 赋值给 person 的 lastName 属性。

现在您可以试一试:

myMother.changeName("Doe");
亲自试一试 »

通过用 myMother 替代 this,JavaScript 可以获知目前处理的哪个 person。


内建 JavaScript 构造器

JavaScript 提供用于原始对象的构造器:

实例

var x1 = new Object();    // 一个新的 Object 对象
var x2 = new String();    // 一个新的 String 对象
var x3 = new Number();    // 一个新的 Number 对象
var x4 = new Boolean();   // 一个新的 Boolean 对象
var x5 = new Array();     // 一个新的数组对象
var x6 = new RegExp();    // 一个新的 RegExp 对象
var x7 = new Function();  // 一个新的函数对象
var x8 = new Date();      // 一个新的日期对象
亲自试一试 »

Math() 对象不再此列。Math 是全局对象。new 关键词不可用于 Math。


您知道吗?

正如以上所见,JavaScript 提供原始数据类型字符串、数字和布尔的对象版本。但是并无理由创建复杂的对象。原始值快得多!

请使用对象字面量 {} 代替 new Object()

请使用字符串字面量 "" 代替 new String()

请使用数值字面量代替 Number()

请使用布尔字面量代替 new Boolean()

请使用数组字面量 [] 代替 new Array()

请使用模式字面量代替 new RexExp()

请使用函数表达式 () {} 代替 new Function()

实例

var x1 = {};            // 新对象
var x2 = "";            // 新的原始字符串
var x3 = 0;             // 新的原始数值
var x4 = false;         // 新的原始布尔值
var x5 = [];            // 新的数组对象
var x6 = /()/           // 新的正则表达式对象
var x7 = function(){};  // 新函数对象
亲自试一试 »

字符串对象

通常,字符串被创建为原始值:var firstName = "John"

但是也可以使用 new 关键词创建字符串对象:var firstName = new String("John")

请在 JS 字符串这一章中学习为何不应该把字符串创建为对象。


数字对象

通常,数值被创建为原始值:var x = 456

但是也可以使用 new 关键词创建数字对象:var x = new Number(456)

请在 JS 数字这一章中学习为何不应该把数值创建为对象。


布尔对象

通常,逻辑值被创建为原始值:var x = false

但是也可以使用 new 关键词创建逻辑对象:var x = new Boolean(false)

请在 JS 逻辑这一章中学习为何不应该把逻辑值创建为对象。