This is my first blood!
第一次在segmentfault
上写(chao)文章。
内容提要:认(wu)真(liao)的整理一下javascript对象的知识,人家还是菜鸟,必须要搞懂啊。
PS:
1.真的菜,所以看到文章的同学,推荐采用随缘阅读法,请自行忽略里面充斥大量的,哦不,巨量的错误、bug。
2.如果您愿意指出我的错误,那最好不过了,寡人谢谢!(参见文章中的‘求大腿’的字样)
3.不过,如果你指望以此契机,期待一场与程序媛之间的轰轰烈烈的深刻的交互,那您还是绕道而行吧。哥真的是汉子,不是童瑶。
4.说是笔记,大部分的代码都是copy的,不爽的同学,直接看参考资料吧。
一 参考资料
1.MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects
2.文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
二 全都是对象
在 JavaScript 中,几乎所有的东西都是对象。所有的原生类型除了 null 与 undefined 之外都被当作对象。它们可以被赋予属性(某些类型的被赋予的属性不能被持久化),并且它们都有对象的全部特征。
三 创建对象
两种创建方式:
1.对象初始化器(Object Initializer)创建对象。(容易理解)
2.创建一个构造函数并使用该函数和 new 操作符初始化对象。(容易装逼)
容易理解的创建方式
模版:
var obj = { property_1: value_1, // property_# may be an identifier...
2: value_2, // or a number...
// ...,
"property n": value_n }; // or a string
实例:
var lolhero = new Object();
lolhero.basicSkill = "Q、W、E";
lolhero.bigSkill = "R only";
lolhero.commotSkill = "D&F";
//两种访问方式
console.log(lolhero['basicSkill']);//采用类似关联数组的方式访问
console.log(lolhero.basicSkill);//直接访问
容易装逼的创建方式
使用构造函数,需要两步!!!
通过创建一个构造函数来定义对象的类型。首字母大写是非常普遍而且很恰当的惯用法。
通过 new 创建对象实例。
写的太好直接copy过来了
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
var Car = new Car("Eagle", "Talon TSi", 1993);
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 对象类型的定义中。
PS:发现没,虽然第二种创建对象的方式看起来不那么自然.
但是却好用,容易移植,容易重新定义,容易复用。所以,还是装逼好啊!
Object.create 创建对象
感觉挺麻烦的,反正已经有了其他创建方式,暂且不管他了。
(这玩意儿一般用的多吗?多用来处理什么功能?求大腿)
四 属性
如果对象的属性名千奇百怪怎么办?
这样也是允许的(太难为js了吧),有谁这么变态的用各种类型的属性名,算了,变态总是有的。
var myObj = new Object(),
str = "myString",
rand = Math.random(),
obj = new Object();
myObj.type = "Dot syntax";
myObj["date created"] = "String with space";
myObj[str] = "String value";
myObj[rand] = "Random Number";
myObj[obj] = "Object";
myObj[""] = "Even an empty string";
console.log(myObj);
当然了,属性值,也可以是个变量
var propertyName = "make";
myCar[propertyName] = "Ford";
propertyName = "model";
myCar[propertyName] = "Mustang";
对象的属性太多,用for(var i in obj){}
来遍历它
hasOwnProperty: 如果 object 具有指定名称的属性,那么JavaScript中hasOwnProperty函数方法返回 true;反之则返回 false。此方法无法检查该对象的原型链中是否具有该属性;该属性必须是对象本身的一个成员。
function showProps(obj,objName) {
var result = "";
for(var i in obj){
if( obj.hasOwnProperty(i) ) {
result += objName+"."+i+" = "+obj[i]+"\n";
}
}
return result;
}
console.log(showProps(myObj,"myobj"));
从 ECMAScript 5 开始,有三种原生的方法用于列出或枚举对象的属性:
for...in 循环
该方法依次访问一个对象及其原型链中所有可枚举的属性。
Object.keys(o)
该方法返回一个对象 o 自身包含(不包括原型中)的所有属性的名称的数组。
Object.getOwnPropertyNames(o)
该方法返回一个数组,它包含了对象 o 所有拥有的属性(无论是否可枚举)的名称。
在 ECMAScript 5 中,没有原生的方法枚举一个对象的所有属性。然而,可以通过以下函数完成:
function listAllProperties(o){
var objectToInspect;
var result = [];
for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){
result = result.concat(Object.getOwnPropertyNames(objectToInspect));
}
return result;
}
上面的这个方法,可以访问所有的可枚举和不可枚举的属性。
PS:对象里面的属性有可枚举和不可枚举两种。(不甚理解什么是不可枚举,求大腿!)
五 继承
所有的 JavaScript 对象继承于至少一个对象。被继承的对象被称作原型,并且继承的属性可能通过构造函数的 prototype 对象找到。
六 为对象类型定义属性
你可以通过 prototype 属性为之前定义的对象类型增加属性。这为该类型的所有对象,而不是仅仅一个对象增加了一个属性。下面的代码为所有类型为 car 的对象增加了 color 属性,然后为对象 car1 的 color 属性赋值:
Car.prototype.color = null;
car1.color = "black";
七 如果我想给对象添加方法怎么办?
两种方式:
objectName.methodname = function_name;
var myObj = {
myMethod: function(params) {
// ...do something
}
};
前面创建对象的完整写法:
function Car(make, model, year, owner) {
//注意displayCar函数里面this和外面的this指向的是同一个car对象!
function displayCar() {
console.log("this2",this);
var result = "A Beautiful " + this.year + " "
+ this.make + " " + this.model;
return result;
}
this.make = make;
this.model = model;
this.year = year;
this.owner = owner;
console.log("this1",this);
this.displayCar = displayCar;
}
var car = new Car("福特汽车","奔驰",1234,"maomaoliang");
console.log(car.displayCar());
或者
function Car(make, model, year, owner) {
this.make = make;
this.model = model;
this.year = year;
this.owner = owner;
this.displayCar = function(){
//...
};
}
八 删除属性
用 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;
九 比较对象
在 JavaScript 中 objects 是一个引用类型。将两个引用相同的对象想比较会返回 true; 将两个方法和属性相同的对象相比较,会返回 false;
// fruit object reference variable
var fruit = {name: "apple"};
// fruitbear object reference variable
var fruitbear = {name: "apple"};
fruit == fruitbear // return false
fruit === fruitbear // return false
// fruit object reference variable
var fruit = {name: "apple"};
// fruitbear object reference variable
var fruitbear = fruit; // assign fruit object reference to fruitbear object reference variable
// here fruit and fruitbear pointing to same object called fruit
fruit == fruitbear // return true
// here fruit and fruitbear pointing to same object called fruit
fruit === fruitbear // return true
意思就是,用的时候要比较引用,而不是比较全部咯?求大腿
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。