中山城市建设集团网站,信誉好的邯郸网站建设,湖南省郴州市宜章县邮政编码,wordpress 幻灯片主题JavaScript 的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合#xff0c;一个属性包含一个名和一个值。一个属性的值可以是函数#xff0c;这种情况下属性也被称为方法。除了浏览器里面预定义的那些对象之外#xff0c;你也可以定义你自己的对象。本章节讲述…JavaScript 的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合一个属性包含一个名和一个值。一个属性的值可以是函数这种情况下属性也被称为方法。除了浏览器里面预定义的那些对象之外你也可以定义你自己的对象。本章节讲述了怎么使用对象、属性、函数和方法怎样实现自定义对象。
对象概述
javascript 中的对象 (物体)和其他编程语言中的对象一样可以比照现实生活中的对象 (物体) 来理解它。
在 javascript 中一个对象可以是一个单独的拥有属性和类型的实体。我们拿它和一个杯子做下类比。一个杯子是一个对象 (物体)拥有属性。杯子有颜色图案重量由什么材质构成等等。同样javascript 对象也有属性来定义它的特征。 对象和属性
一个 javascript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 javascript 变量基本没什么区别仅仅是属性属于某个对象。属性定义了对象的特征。你可以通过点符号来访问一个对象的属性。
objectName.propertyName;和其他 javascript 变量一样对象的名字 (可以是普通的变量) 和属性的名字都是大小写敏感的。你可以在定义一个属性的时候就给它赋值。例如我们创建一个 myCar 的对象然后给他三个属性makemodelyear。具体如下所示
var myCar new Object();
myCar.make Ford;
myCar.model Mustang;
myCar.year 1969;对象中未赋值的属性的值为undefined而不是null。
myCar.noProperty; // undefinedJavaScript 对象的属性也可以通过方括号访问或者设置. 对象有时也被叫作关联数组因为每个属性都有一个用于访问它的字符串值。例如你可以按如下方式访问 myCar 对象的属性
myCar[make] Ford;
myCar[model] Mustang;
myCar[year] 1969;你也可以通过存储在变量中的字符串来访问属性
var propertyName make;
myCar[propertyName] Ford;propertyName model;
myCar[propertyName] Mustang;你可以在 for...in 语句中使用方括号标记以枚举一个对象的所有属性。为了展示它如何工作下面的函数当你将对象及其名称作为参数传入时显示对象的属性
function showProps(obj, objName) {var result ;for (var i in obj) {if (obj.hasOwnProperty(i)) {result objName . i obj[i] \n;}}return result;
}因而对于函数调用 showProps(myCar, myCar) 将返回以下值
myCar.make Ford;
myCar.model Mustang;
myCar.year 1969;枚举一个对象的所有属性
有三种原生的方法用于列出或枚举对象的属性
for...in 循环 该方法依次访问一个对象及其原型链中所有可枚举的属性。Object.keys(o) 该方法返回对象 o 自身包含不包括原型中的所有可枚举属性的名称的数组。Object.getOwnPropertyNames(o) 该方法返回对象 o 自身包含不包括原型中的所有属性 (无论是否可枚举) 的名称的数组。 创建新对象
JavaScript 拥有一系列预定义的对象。另外你可以创建你自己的对象。从 JavaScript 1.2 之后你可以通过对象初始化器Object Initializer创建对象。或者你可以创建一个构造函数并使用该函数和 new 操作符初始化对象。
使用对象初始化器
除了通过构造函数创建对象之外你也可以通过对象初始化器创建对象。使用对象初始化器也被称作通过字面值创建对象。
通过对象初始化器创建对象的语法如下
var obj {property_1: value_1, // property_# 可以是一个标识符...2: value_2, // 或一个数字...[property 3]: value_3, // 或一个可计算的 key 名...// ...,property n: value_n,
}; // 或一个字符串这里 obj 是新对象的名称每一个 property_i 是一个标识符可以是一个名称、数字或字符串字面量并且每个 value_i 是一个其值将被赋予 property_i 的表达式。obj 与赋值是可选的如果你不需要在其他地方引用对象你就不需要将它赋给一个变量。注意在接受一条语句的地方你可能需要将对象字面量括在括号里从而避免将字面量与块语句相混淆
是不是觉得而很复杂看下面例子就不再复杂了
下例创建了有三个属性的 myHonda 对象。注意它的 engine 属性也是一个拥有自己属性的对象。
var myHonda { color: red, wheels: 4, engine: { cylinders: 4, size: 2.2 } };使用构造函数
作为另一种方式你可以通过两步来创建对象
通过创建一个构造函数来定义对象的类型。首字母大写是非常普遍而且很恰当的惯用法。通过 new 创建对象实例。
为了定义对象类型为对象类型创建一个函数以声明类型的名称、属性和方法。例如你想为汽车创建一个类型并且将这类对象称为 car 并且拥有属性 make, model和 year你可以创建如下的函数
function Car(make, model, year) {this.make make;this.model model;this.year year;
}注意通过使用 this 将传入函数的值赋给对象的属性。
现在你可以象这样创建一个 mycar 对象
var mycar new Car(Eagle, Talon TSi, 1993);该创建了 mycar 并且将指定的值赋给它的属性。因而 mycar.make 的值是字符串 Eagle mycar.year 的值是整数 1993依此类推。
你可以通过调用 new 创建任意数量的 car 对象。例如
var kenscar new Car(Nissan, 300ZX, 1992);
var vpgscar new Car(Mazda, Miata, 1990);一个对象的属性值可以是另一个对象。例如假设你按如下方式定义了 person 对象
function Person(name, age, sex) {this.name name;this.age age;this.sex sex;
}然后按如下方式创建了两个 person 实例
var rand new Person(Rand McKinnon, 33, M);
var ken new Person(Ken Jones, 39, M);那么你可以重写 car 的定义以包含一个拥有它的 owner 属性如
function Car(make, model, year, owner) {this.make make;this.model model;this.year year;this.owner owner;
}你可以按如下方式创建新对象
var car1 new Car(Eagle, Talon TSi, 1993, rand);
var car2 new Car(Nissan, 300ZX, 1992, ken);注意在创建新对象时上面的语句将 rand 和 ken 作为 owner 的参数值而不是传入字符串字面量或整数值。接下来你如果想找出 car2 的拥有者的姓名你可以访问如下属性
car2.owner.name;注意你总是可以为之前定义的对象增加新的属性。例如语句
car1.color black;为 car1 增加了 color 属性并将其值设为 black. 然而这并不影响其他的对象。想要为某个类型的所有对象增加新属性你必须将属性加入到 car 对象类型的定义中即为对象类型定义属性。
为对象类型定义属性
你可以通过 prototype属性为之前定义的对象类型增加属性。这为该类型的所有对象而不是仅仅一个对象增加了一个属性。下面的代码为所有类型为 car 的对象增加了 color 属性然后为对象 car1 的 color 属性赋值
Car.prototype.color null;
car1.color black;对象属性索引
在 JavaScript 1.1 及之后版本中如果你最初使用名称定义了一个属性则你必须通过名称来访问它而如果你最初使用序号来定义一个属性则你必须通过索引来访问它。
这个限制发生在你通过构造函数创建一个对象和它的属性就象我们之前通过 Car 对象类型所做的那样并且显式地定义了单独的属性如 myCar.color red之时。如果你最初使用索引定义了一个对象属性例如 myCar[5] 25则你只可能通过 myCar[5] 引用它。 定义方法
一个方法是关联到某个对象的函数或者简单地说一个方法是一个值为某个函数的对象属性。定义方法就像定义普通的函数除了它们必须被赋给对象的某个属性。
objectName.methodname function_name;var myObj {myMethod: function(params) {// ...do something}// 或者 这样写也可以myOtherMethod(params) {// ...do something else}
};这里 objectName 是一个已经存在的对象methodname 是方法的名称而 function_name 是函数的名称。
你可以在对象的上下文中象这样调用方法
object.methodname(params);你可以在对象的构造函数中包含方法定义来为某个对象类型定义方法。例如你可以为之前定义的 car 对象定义一个函数格式化并显示其属性
function displayCar() {var result A Beautiful ${this.year} ${this.make} ${this.model};pretty_print(result);
}这里 pretty_print 是一个显示横线和一个字符串的函数。注意使用 this 指代方法所属的对象。
你可以在对象定义中通过增加下述语句将这个函数变成 Car 的方法
this.displayCar displayCar;因此Car 的完整定义看上去将是
function Car(make, model, year, owner) {this.make make;this.model model;this.year year;this.owner owner;this.displayCar displayCar;
}然后你可以按如下方式为每个对象调用 displayCar 方法
car1.displayCar();
car2.displayCar();通过this引用对象
JavaScript 有一个特殊的关键字 this它可以在方法中使用以指代当前对象。例如假设你有一个名为 validate 的函数它根据给出的最大与最小值检查某个对象的 value 属性
function validate(obj, lowval, hival) {if (obj.value lowval || obj.value hival) {alert(Invalid Value!);}
}定义getter和setter
一个 getter 是一个获取某个特定属性的值的方法。一个 setter 是一个设定某个属性的值的方法。你可以为预定义的或用户定义的对象定义 getter 和 setter 以支持新增的属性。定义 getter 和 setter 的语法采用对象字面量语法。
下面例子描述了 getter 和 setter 是如何为用户定义的对象 o 工作的。
var o {a: 7,get b() {return this.a 1;},set c(x) {this.a x / 2;},
};console.log(o.a); // 7
console.log(o.b); // 8
o.c 50;
console.log(o.a); // 25o 对象的属性如下
o.a — 数字o.b — 返回 o.a 1 的 gettero.c — 由 o.c 的值所设置 o.a 值的 setter
原则上getter 和 setter 既可以
使用 使用对象初始化器 定义也可以之后随时使用 getter 和 setter 添加方法添加到任何对象
当使用 使用对象初始化器 的方式定义 getter 和 setter 时只需要在 getter 方法前加 get在 setter 方法前加 set当然getter 方法必须是无参数的setter 方法只接受一个参数 (设置为新值例如
var o {a: 7,get b() {return this.a 1;},set c(x) {this.a x / 2;},
};删除属性
你可以用 delete 操作符删除一个不是继承而来的属性。下面的例子说明如何删除一个属性
//Creates a new object, myobj, with two properties, a and b.
var myobj new Object();
myobj.a 5;
myobj.b 12;//Removes the a property, leaving myobj with only the b property.
delete myobj.a;如果一个全局变量不是用 var 关键字声明的话你也可以用 delete 删除它
g 17;
delete g;比较对象
在 JavaScript 中 objects 是一种引用类型。两个独立声明的对象永远也不会相等即使他们有相同的属性只有在比较一个对象和这个对象的引用时才会返回 true.
// 两个变量两个具有同样的属性、但不相同的对象
var fruit { name: apple };
var fruitbear { name: apple };fruit fruitbear; // return false
fruit fruitbear; // return false备注 运算符用来检查数值是否相等1 1返回 false而 1 1 返回 true
// 两个变量同一个对象
var fruit { name: apple };
var fruitbear fruit; // 将 fruit 的对象引用 (reference) 赋值给 fruitbear
// 也称为将 fruitbear“指向”fruit 对象
// fruit 与 fruitbear 都指向同样的对象
fruit fruitbear; // return true
fruit fruitbear; // return true了解更多关于比较操作符的用法查看 Comparison operators (en-US). 附以上内容均为个人在MDN网站上学习JS的笔记若有侵权将在第一时间删除若有错误将在第一时间修改。
