JavaScript:对象学习

2017-03-21  本文已影响68人  勇往直前888

JavaScript有数组,但是没有字典这种结构,对象从形式上看就是一种字典结构。并且对象的key统一为String类型,(用其他类型也不会出错,只是内部会调用toString接口自动转),value可以是简单的值,对象,函数,数组等。
可以简单理解为对象就是字典的键值对,跟JSON互转非常方便。个人非常认同这种简单的处理方式。
当然,有map这种类似字典的结构,至少名字不叫字典,并且目前更愿意用数组的map()方法。
一切都是对象,比如数组、函数本身都是对象。数字,布尔量等等也都是对象。

对象创建

JavaScript没有类的概念,而是采用原型链的方式来定义类。平时使用的时候直接调用构造函数创建类。并且也没有析构函数的概念。delete也只是删除对象的属性,而不是回收对象。对象的回收由GC统一负责,不需要操心
使用对象
Javascript 创建对象方法的总结
JavaScript prototype
JavaScript 对象

直接{}初始化

大多数时候,对象就是一些键值对的组合,比如MVC设计模式中的M,只有属性,没有方法,并且字段名都确定。那么最简单的方式就是直接定义变量,给初始化值。对象定义和初始化一并完成了。对象{}可以嵌套,跟JSON很相似:

var myCar = {
    color: "red", 
    wheels: 4, 
    engine: {
        cylinders: 4, 
        size: 2.2
    }
};
console.dir(myCar);

构造函数

如果Model在好几个地方用,那么直接初始化的方法就不大合适,一不小心属性名字就写的不一样了。可以定义一个构造函数,然后用的地方调用这个构造函数创建对象,可以保证大家的属性名字是一样的,只是对象的名字和属性值不一样。
这里包括定义构造函数和定义变量并初始化两个步骤

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var myCar = new Car("Eagle", "Talon TSi", 1993);
console.dir(myCar);

动态添加属性

一开始只知道要用一个对象,但是字段一个都不知道。等到用的时候才知道字段的名字和值。这种场景,可以通过直接添加属性的方式创建对象。这种形式使用起来最方便。

person = {};  // person = new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
console.dir(person);

添加方法

function Person(name,age,job) {
    this.name=name;
    this.age=age;
    this.job=job;
}

Person.prototype = {
    friends:["Jams","Martin"],
    sayFriends:function() {
        alert(this.friends);
    }
};

var person1 = new Person("kevin",31,"SE");
var person2 = new Person("Tom",30,"SE");
person1.friends.push("Joe");
person1.sayFriends(); // Jams,Martin,Joe
person2.sayFriends(); // 也是Jams,Martin,Joe;因为属性friends在prototype定义,所有Person对象共享
console.dir(person1);
console.dir(person2);

如果要把prototype部分的定义放到构造函数中,要注意保护只做一次。因为构造函数会被多次调用,但是定义prototype只要1次就可以了。推荐还是这种将prototype拿到构造函数外面定义的方式。

访问对象

// 同时创建四个变量,用逗号分隔
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.dir(myObj);

原型对象(prototypical object)

// 修改 Object.prototype
Object.prototype.bar = 1;

var foo = {moo: 2};
for(var i in foo) {
    console.log(i); // 输出两个属性:bar 和 moo
}

for(var i in foo) {
    if (foo.hasOwnProperty(i)) {
        console.log(i);   // 只输出 moo
    }
}      

参考文章

javaScript原型链理解
这个文章讲得比较清楚,特别是那张图要好好理解。

对象模型的细节

深入理解JavaScript系列(5):强大的原型和原型链

彻底理解javascript中的原型链

上一篇 下一篇

猜你喜欢

热点阅读