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); } } }