一 对象的属性类型
ECMAScript中有两种属性：数据属性和访问器属性。
①数据类型
数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的 特性。
- Configurable：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。直接在对象上定义的属性此默认值为 true。
- Enumerable：表示能否通过 for-in 循环返回属性。直接在对象上定义的属性此默认值为 true。
- Writable：表示能否修改属性的值。直接在对象上定义的属性此默认值为 true。 - Value：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候， 把新值保存在这个位置。这个特性的默认值为 undefined。
②访问器属性
访问器属性不包含数据值；在读取访问器属性时，会调用 getter函数，这个函数负责返回有效的值；在写入访问器属性时，会调用 setter函数并传入新值，这个函数负责决定如何处理数据。访问器属性有如下 4个特性。
- Configurable：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。对于直接在对象上定义的属性，这个特性的默认值为 true。
- Enumerable：表示能否通过 for-in 循环返回属性。对于直接在对象上定义的属性，这 个特性的默认值为 true。
- Get：在读取属性时调用的函数。默认值为 undefined。
- Set：在写入属性时调用的函数。默认值为 undefined。
访问器属性不能直接定义，必须使用 Object.defineProperty()来定义。
二 关于对象的属性
①可以使用in来判断一个对象是否有某个属性
let person = {
name: "秦始皇",
age: 18
}
console.log("name" in person);//true
②获取属性值的两种方法
- 使用
.获取对象属性值
let person = {
name: "秦始皇",
age: 18
}
console.log(person.name);//"秦始皇"
- 使用
[ ]获取属性值
let person11 = {
name: "秦始皇",
age: 18
}
console.log(person11[name]);//"秦始皇"
person11["gender"] = "男";//添加属性
console.log(person11.gender);//男
③属性值省写
属性名和变量名一样, 可以省略书写变量
function makeUser(name, age) {
return {
name: name,
age: age
};
}
let user = makeUser("John", 30);
console.log(user)
可以写为：
function makeUser(name, age) {
return {
name,
age
};
}
let user = makeUser("John", 30);
console.log(user)
④遍历对象所有属性
let person = {
name: "秦始皇",
age: 18,
gender: "男"
}
for (key in person) {
console.log(key);
console.log(person[key]);
}
三 创建对象的几种方式
①基本模式
var person = new Object();
person.name = "秦始皇";
person.age = "18";
person.run = function () { return this.name + "的年龄" + person.age;
}
②字面量模式
var obj ={
name: " 秦始皇",
age: 18,
eat: function(){}
}
虽然 Object 构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点：使用同 一个接口创建很多对象，会产生大量的重复代码。为解决这个问题，人们开始使用工厂模式的一种变体。
③工厂模式创造对象
function person(name, age, job) {
var arr = new Object();
arr.name = name;
arr.age = age;
arr.job = job;
arr.sayName = function() {
alert(this.name);
};
console.log(JSON.stringify(arr));
}
var per1 = person("秦始皇", 18, "皇帝");
var per2 = person("李世民", 20, "皇帝");
工厂模式却无法区分对象的类型，为了解决这个问题，提出了构造函数模式。
④构造函数模式（大写字母开头）
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
与工厂模式的区别是：
- 没有显式地创建对象；
- 直接将属性和方法赋给了 this 对象；
- 没有 return 语句。
alert(person1 instanceof Object); //true 所 有对象均继承自 Object
alert(person1 instanceof Person); //true
alert(person1.constructor == Person); //true
⑤ 原型模式
js中规定，每一个构造函数都有一个prototype属性，指向另一个对象，这个对象的所有属性和方法，都会被构造函数的实例继承，可以把那些不变的属性和方法直接定义在prototype对象上。
function personObj() { }
personObj.prototype.name = "秦始皇";
personObj.prototype.age = "18";
personObj.prototype.run = function () { return this.name + "年龄是" + this.age;
} //创建对象
写法二
var person = new personObj(); //原型模式的另一种写法 function personObj() { }
personObj.prototype = {
constructor: personObj,//强制指回personObj
name: "孙悟空",
weapon: "棒子",
run: function () { return this.name + "武器是" + this.weapon;
}
}
构造函数没有参数，不能传参初始化值，因为不同的对象可能只共享方法，但是不会共享属性，为了解决这个问题创建了构造函数和原型模式的组合模式，还解决了前面的所有缺点，Jquery就是使用的这种方法。
⑥构造函数和原型模式的组合模式
function personObj(name, age) {
this.name = name;
this.age = age;
}
personObj.prototype = {
run: function() {
return this.name + "年龄是" + this.age;
}
} //创建对象
var wukou = new personObj("秦始皇", "18");
⑦动态原型模式
function personObj(name, age) {
this.name = name;
this.age = age;
if (typeof this.run != "function") {
personObj.prototype = {
run: function() {
return this.name + "年龄是" + this.age;
}
}
}
}
//创建对象
var person1 = new personObj("秦始皇", "18");
函数中使用if (typeof this.run != "function") 目的是为了防止创建多个对象时，方法执行多次
网友评论