JS学习（三）—— 对象

对象简介

       对象是javascript的基本数据类型。对象其实是无序属性的集合，其属性可以包含基本值，对象或者函数。我们可以通过编程对 对象的属性进行增加和删除。但是javascript的对象属性并没有公有私有的概念。

参考文章：https://www.cnblogs.com/Yellow-ice/p/10439386.html

1. this关键字

        this是JavaScript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。如果对this关键字不了解，很容易在多层嵌套的编程中混淆this所指向的对象，从而导致程序的错误。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

例如：

var point = {
    x : 0,
    y : 0,
    moveTo : function(x, y) {
        this.x += x;
        this.y += y;
    }
};

// 此时我们是通过point对象来调用的moveTo函数，所以moveTo函数里的this指向的就是point
point.moveTo(10, 10);
console.log("x: " + point.x + " y: " + point.y);  // 输出：x: 10 y: 10

 

2.对的创建

1. 直接创建

在es5中并没有class，class关键字在es6中才真正可以使用。而在es5中可以直接使用花括号创建对象实例，这种方式创建对象简单直接，但是当需要生成大量某相同对象的实例的时候就会有大量的冗余代码：

var obj = {};    // 创建一个对象obj

// 直接创建对象实例
var man = {
    name : "张三",
    age: 21,
    sayHello: function() {
        console.log("Hello，我是张三");
    }

}

 

2. 工厂模式

使用工程模式产生一个对象，这种模式其实是一个设计模式，抽象了创建具体对象的过程，主要是通过在函数内部创建一个对象，为其添加属性和方法，并将对象返回，从而实现创建多个对象的目的，所以叫做工厂模式：

// 工厂模式
function createObj(name, description) {
    var o = new Object();
    o.name = name;
    o.description = description;
    o.showDescription = function() {
        console.log(this.description);
    };
    return o;
}

// 使用工厂模式创建实例
var obj1 = createObj("Car", "我是一辆车");
var obj2 = createObj("Plane", "我是一架飞机");

console.log(typeof obj1);   // 输出  object

 

3. 寄生模式

这种模式其实和工厂模式很像，除了使用new操作符并把使用的包装函数叫做构造函数之外，和工厂模式可以说是一模一样的。

function SpecialArray() {
    var values = new Array();
    values.push.apply(values, argumens);
    values.toPipedString = function() {
        return this.join("|");
    }
    return values;
}

var colors = new SpecialArray("red","blue");
console.log(colors.toPipedString());  //  red|blue

4. prototype模式（原型模式）

我们都知道，每个函数都有一个prototype(需要深究)属性，这个属性是一个指针，指向一个对象，而这个对象就是原型对象，包含了所有实例共享的属性和方法，如果我们要创建的对象需要共享属性和方法。

function Person() {
}

// 使用prototype模式直接给属性初始化默认值
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.sayName = function() {
    console.log(this.name);
}

var person1 = new Person();
var person2 = new Person();
person1.sayName();  //  Nicholas
person2.sayName();  //  Nicholas

5. 稳妥模式

因为js没有私有的概念，稳妥模式下的对象属性是私有的，看例子，talk is cheap, show you the code!

// 稳妥模式下的对象属性是私有的 
function Person(name, age) {
    var o = new Object();
    _name = name;
    _age = age;
    o.sayName = function() {
        return _name;
    }
    return o;
}

var person1 = Person("Nicholas", 29);
person1.sayName();  //  Nicholas
console.log(person1._name);

运行结果：

6. ES6中的class模式（推荐）

ES6中添加了class关键字，它的出现使得对象编程变得更清晰更具有结构性，更加的符合面向对象的编程思想。与java等纯面向对象的语言一样，es6中的类还可以继承。

// 使用class关键字
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayName() {
        console.log(this.name);
    }
}

// 但此时的person的属性并不是私有的
var person1 = new Person("Nicholas", 29);
person1.sayName();  //  输出Nicholas

class Chinese extends Person {
    construct(name, age, color){
        this.$super(name, age); this.color = color;
    }
}

var cn = new Chinese("张三", 19, "yellow");
cn.sayName();      //张三
console.log(cn.color);   // undefined