JavaScript系列---【面向对象--对象创建方式】

1.字面量创建对象

// 字面量创建: 使用json形式创建对象
// json: js对象表示法, 内部由键值对(key-value)组成
// { key1: value1 , key2: value2 } 
var obj = {
    name: 'lilei',
    age: 20,
    sayhi: function () {
        console.log('hi');
    }
};
console.log(obj.name); // lilei
console.log(obj.age); // 20
console.log(obj.sayhi); // ƒ () { console.log('hi'); }
console.log(obj['name']); // lilei
obj.sayhi();

2.实例创建

// 实例创建对象: 使用new Object();创建对象
var obj = new Object();
console.log(obj); // {}
console.log(typeof obj); // object
// 给对象添加属性
obj.name = 'lilei';
obj.age = 20;
// 给对象添加方法
obj.sayhi = function () {
    console.log('hi');
}

3.工厂模式创建对象

// 工厂模式创建对象: 把创建对象的过程封装在函数中,根据不同的参数创建出不同的对象.
// 工厂模式可以简化创建对象的过程, 但是无法分辨对象是由具体哪个构造函数创建的
// instanceof: 检查对象是否由某个构造函数创建,返回值是Boolean
function createObject(name, age) {
    // 创建对象
    var obj = new Object();
    // 给对象添加属性和方法
    obj.name = name;
    obj.age = age;
    obj.sayhi = function () {
        console.log('hi, 我叫' + this.name + '我今年' + this.age);
    }
    // 返回对象
    return obj;
}
var lilei = createObject('李磊', 20);
console.log(lilei.name);
var xiaoming = createObject('小明', 21);
console.log(lilei instanceof Object); // true
console.log(xiaoming instanceof Object); // true
console.log(lilei instanceof createObject); // false

4.构造函数创建对象

// 构造函数
// 1.构造函数名字首字母大写(约定)
// 2.构造函数没有显式创建对象(没有new Object())
// 3.把属性和方法绑定给内部的this对象
// 4.构造函数没有return语句,不用返回对象
// 5.构造函数必须使用new运算符调用

// new:
// 1.创建一个新对象
// 2.把构造函数作用域赋值给新对象(把this绑定给新对象)
// 3.给this绑定属性和方法
// 4.把对象返回
function Student(name, age) {
    this.name = name;
    this.age = age;
    this.sayhi = function () {
        console.log('hi, 我叫' + this.name + '我今年' + this.age);
    }
}
var xiaoming = new Student('xiaoming', 18);
console.log(xiaoming); // Student {name: "xiaoming", age: 18, sayhi: ƒ}var xiaohong = new Student('xiaohong', 19);
console.log(xiaohong); // Student {name: "xiaohong", age: 19, sayhi: ƒ}
console.log(xiaoming.sayhi == xiaohong.sayhi); // false
console.log(xiaoming instanceof Student); // true
console.log(xiaohong instanceof Student); // true

5.原型创建对象

// 原型创建对象: 把属性和方法同一绑定在原型上, 创建的对象都一样

function People() {

People.prototype.name = 'lilei';

People.prototype.age = 20;

People.prototype.sayhi = function () {

console.log('hi, 我叫' + this.name + '我今年' + this.age);

}

var obj1 = new People();

var obj2 = new People();

console.log(obj1, obj2); // People {} People {}

console.log(obj1.name, obj1.age);//lilei 20

console.log(obj2.name, obj2.age);//lilei 20

obj1.sayhi();//hi, 我叫lilei我今年20

obj2.sayhi();//hi, 我叫lilei我今年20

console.log(obj1.sayhi === obj2.sayhi);//true

6.混合模式(构造函数+原型)创建对象

/ 混合模式(构造函数+原型)
// 把可变的属性和方法存在构造函数中
function People(name, age) {
    this.name = name;
    this.age = age;
}

// 把不变的属性和方法存在原型上
People.prototype.tag = 'tag';
People.prototype.sayhi = function () {
    console.log('hi, 我叫' + this.name + '我今年' + this.age);
}

// 创建对象
var obj1 = new People('xiaoming', 20);
var obj2 = new People('xiaohong', 21);
console.log(obj1, obj2); // People {name: "xiaoming", age: 20} People {name: "xiaohong", age: 21}
console.log(obj1.tag, obj2.tag); // tag tag
console.log(obj1.sayhi === obj2.sayhi); // true

7.动态混合模式创建对象

function People(name, age) {
    this.name = name;
    this.age = age;

    if (typeof this.sayhi != 'function') {
        People.prototype.sayhi = function () {
            console.log('hi, 我叫' + this.name + '我今年' + this.age);
        }
    }
}