理解对象
JS 中的对象是一系列无序 key: value 的集合
var obj = { a: 1, b: 2}
var person = {
name: 'hunger',
printName: function(){
console.log('My name is hsc')
}
}
但假设我们定义一个函数
function sum(a, b){
return a + b
}
console.log(sum.name) // => sum
console.log(sum.length) //2
会发现，函数 sum也有很多属性，从这个角度看，函数也是 js 对象的一种
构造对象
(1) 通过字面量来构造一个对象
这种方法缺点很明显：
太麻烦了，每次构建一个对象都是复制一遍代码
var obj1 = {
name: 'Byron',
age: 20,
printName: function(){
console.log(obj1.name);
}
}
var obj2 = {
name: 'Casper',
age: 25,
printName: function(){
console.log(obj2.name);
}
}
(2) 使用函数做自动化
这种方法解决了上一种的代码重复的问题，但是这种方法还是不够完美。这种方式构造出来的对象类型都是Object，没有识别度。并且每个对象都有一个相同的printName方法，造成了内存的浪费
function createObj(name, age)
{
var obj = {
name: name,
age: age,
printName: function(){
console.log(this.name)
}
}
return obj
}
var obj = createObj('hsc', 25)
obj.printName()
(3) 通过new运算符来构造函数，返回一个对象实例
function Person(name, age){
this.name = name;
this.age = age;
this.printName = function(){
console.log(this.name);
}
}
var p1 = new Person('Byron', 25);
var p2 = new Person('HSC', 30);
这种方式创建对象首先需要了解几个知识点
- new 运算符接受一个函数 F 及其参数：new F(arguments...)
- function作为构造函数（通过new操作符调用）的时候会返回一个类型为function的name的对象
- 前面说过函数也是一个对象，function有个constructor的属性指向其本身
那么，通过new运算符构造函数从而创建出一个对象的过程具体如何实现的呢？即var p1 = new Person('Byron', 25)具体发生了什么呢？
①创建一个空对象。空对象的 proto 属性被浏览器自动设置为 F.prototype (具体参考原型和原型链的介绍)
②初始化该对象。函数 F 被传入参数并调用，关键字 this 被设定为该空对象，可按照下面理解
function Person(name, age){
var this = {};
this.name = name;
this.age = age;
this.sayName = function(){
console.log(this.name);
}
return this
}
var p1 = new Person('Byron', 25);
var p2 = new Person('HSC', 30);
③返回赋值完成的对象
注：在函数中return 基本类型，构造函数时。没有影响，但是return一个对象时，就会有影响。如下
function Person(name, age){
this.name= name;
this.age = age;
return 1 //情况①
return {a:1,b:2} //情况②
}
var p1 = new Person('Byron', 25); //情况①结果： p1{name:"Byron", age:25}
var p1 = new Person('Byron', 25); //情况②结果： p1{a:1,b:2}
这种方法构建的对象具有识别度，为什么这么说呢？先来看一看instanceof这个操作符，它可以判断对象是否为某个函数的实例。注意instanceof判断的是对象（1 instanceof Number 结果是false）
p1 instanceof Person //true
p1 instanceof Object //true
p1 instanceof Animal //false
可见通过new构造出来的对象，是属于创建它的函数的一个实例。这个创建实例的函数就是js中的类
识别度的问题是解决了，可是这样构建对象，同样每个对象都有相同的printName方法，造成了内存的浪费，这就要提到prototype（原型）了。
每个函数内部都有一个prototype对象，实例调用方法（p1.printName()）时，会先去自身找有没有这个方法，找不到，会自动去__proto__中找，也就是F.prototype中找。这样重复的方法（比如printName）等可以放到F.prototype中（原型，相当于一个公共容器），可以减少内存的浪费。
所以最终的代码可以改成这样
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.printName = function(){
console.log(this.name);
}
var p1 = new Person('Byron', 25);
var p2 = new Person('HSC', 30);
注：公共容器中的函数中的this也是指的是调用该函数的对象（所以p1.printName输出的是Byron，而p1.__proto__.printName输出的是undefined，因为p1.__proto__（即Person.portotype）并没有name属性）
所以，现在知道了通过new F 来构造对象是最好的了吧！
网友评论