轻松上手,快乐学习!

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 比较运算符JS 条件语句JS Switch 语句JS For 循环JS While 循环JS BreakJS 类型转换JS 位运算符JS 正则表达式JS 错误处理JS 作用域JS HoistingJS 严格模式JS this 关键词JS Let 关键词JS Const 关键词JS 箭头函数JS 类JS 调试JS 样式指南JS 最佳实践JS 常见错误JS 性能优化JS 保留关键词JS 版本JS ES5JS ES6JS JSONJS FormsForms APIObject 对象定义Object 对象属性Object 对象方法Object DisplayObject 对象访问器Object 对象构造器Object 对象原型Object ECMAScript 5JS 函数定义JS 函数参数JS 函数调用JS Call 函数JS Apply 函数JS 函数闭包Class 类简介Class 类继承Class StaticJS 回调JS 异步JS PromisesJS Async/AwaitDOM 简介DOM 方法DOM 文档DOM 元素DOM HTMLDOM CSSDOM 动画DOM 事件DOM 事件监听DOM 导航DOM 节点DOM 集合DOM 节点列表JS WindowJS ScreenJS LocationJS HistoryJS NavigatorJS 弹出框JS TimingJS CookiesAJAX 简介AJAX XMLHttpAJAX 请求AJAX 响应AJAX XML 文件AJAX PHPAJAX ASPAJAX 数据库AJAX 应用程序AJAX 实例JSON 简介JSON 语法JSON vs XMLJSON 数据类型JSON 解析JSON 字符串化JSON 对象JSON 数组JSON PHPJSON HTMLJSON JSONPWeb API 简介Web History APIWeb Storage APIWeb Geolocation APIjQuery 选择器jQuery HTMLjQuery CSSjQuery DOMJS 实例JS HTML DOMJS HTML 输入JS HTML 对象JS HTML 事件JS BrowserJS 编辑器JS 练习JS 测验

JS 参考手册

JS 参考手册(类别排序)JS 参考手册(字母排序)


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 逻辑这一章中学习为何不应该把逻辑值创建为对象。