又到了一周的这个“交”作业的时间，今天就“文绉绉”一把，谈谈“茴香豆”的“茴”字的四种写法吧～～
哈哈，不对不对，是在JavaScript里，创建对象的四种写法，对自己学习前端的一个小小的总结。
第一种方法：字面量法【JSON法】
这种写法其实最简单，在JavaScript创建一个对象，代码如下：
var house = {};
console.log(typeof(house));
这时，在控制台上输出的就是object，嗯，没错，在JavaScript里创建一个对象就是这么“随意”。
好，接着我们看一个稍微复杂点的对象吧
var house = {
price:8000000,
area:100,
address:{
city:"上海",
district:"浦东新区",
street:"世纪大道"
}
};
console.log(house.price);
console.log(house.address.district);
这里，我们定义了一个house对象，然后里面其实还嵌套了一个address的对象。我分别可以获取house对象里的price属性。当然我也可以获得addrees这个属性下的指。
这里，我们可以暂时将JavaScript里的对象看成key-value的键值对。其中值也可以继续是一个对象（肯定也是一个键值对）。
这么看下上面这段代码是否就更好理解了些？
好，那么我们继续再丰富下这段代码
var house = {
price:8000000,
area:100,
address:{
city:"上海",
district:"浦东新区",
street:"世纪大道"
},
info:function(){
console.log("这套房子面积为:"+this.area+",价格为"+this.price+"元");
}
};
console.log(house.price);
console.log(house.address.district);
house.info();
如果你有一点点编程基础，可以看到，我为house这个对象又定义了一个方法，用于输出这套房子的一些基本信息，其中要特别注意下，这里输出的area和price属性，是属于当前这个house对象的，需要增加this这个关键字哦。
嗯，至此这种创建对象的方法也就介绍的差不多了，对于一个后端狗来说，看下上面那个对象的定义，就是是一个JSON字符串？嗯，对的呢，你想下JSON的全程是JavaScript Object Notation嘛。
第二种方法：创建对象法
这里我们继续以房子来举例，重新实现一下上面这段代码。
var house = new Object();
house.price = 8000000;
house.area = 100;
var address = new Object();
address.city = "上海";
address.district = "浦东新区";
address.street = "世纪大道";
house.address = address;
house.info = function(){
console.log("这套房子面积为:"+this.area+",价格为"+this.price+"元");
};
这次，我们是直接用JavaScript提供的new Object()这个语法来完成创建一个对象的，然后本身语言是支持对这个对象增加、删除属性、方法。同时也是支持点语法的，对于一个后端狗来说，相对第一种，也许这种方法还更好理解一些吧？但就是写起来有点太麻烦，而且还不够通用似的？因为这里直接就是对象的概念，而JavaScript真的没有类这个概念吗？嗯，好吧，这是一个“更好”的话题，可以足以开一篇文章都未必讲的清楚呢（好吧，我承认是我比较渣啦～），那么回过头来，我们接着还有一种实现方法，看起来有那么一点点像“类”的意思呢。
第三种方法：构造函数法
嗯，我们继续重新实现一下上面那段示例代码：
function Address(city,district,street){
this.city = city;
this.district = district;
this.street = street;
}
function House(price,area,address){
this.price = price;
this.area = area;
this.address = address;
this.info = function(){
console.log("这套房子面积为:"+this.area+",价格为"+this.price+"元");
}
}
address = new Address("上海市",“浦东新区”,"世纪大道");
house = new House(8000000,100,address);
house.info();
这里是“定义”好了address和house这两个对象的蓝图，然后用new这个关键字去最终“实现”完成，看来还真是挺像定义了一个类吧？这种方法看起来是不是更顺眼了一点呢？
嗯，最后为了凑齐“茴香豆”的四种写法，就又拼了一种利用工厂模式的【嗯，是的，这次我们没有讨论原型，不过请放心，原型是一定会说到的，哈哈哈】
第四种方法：工厂模式法
还是老规矩，我们继续重新实现一遍这段代码:
function createHouse(price,area,city,district,street){
var house = new Object();
house.price = price;
house.area = area;
var address = new Object();
address.city = city;
address.district = district;
address.street = street;
house.address = address;
house.info = function(){
console.log("这套房子面积为:"+this.area+",价格为"+this.price+"元");
};
return house;
}
var house = createHouse(8000000,100,"上海","浦东新区","世纪大道");
house.info();
嗯，上面这种实现的方式，是利用了工厂模式，“封装”了一个房子对象的创建过程，至于内部实现，这里还是利用了new Object() 这种语法，那么是否还有其他的方法？嗯，肯定还是有的，“茴”字的写法也还真不止四种，那么实际在写代码的过程中，应该是用哪几种呢？嗯，留给你和我一起思考～
网友评论