文章目录
对象创建模式
Object构造函数模式
方式一:Object构造函数模式
套路:先创建Object对象,再动态添加属性/方法
适用场景:起始时不确定对象内部数据
问题:语句太多
/*
一个人:name:"Tom",age: 12
*/
var p = new Object();
p.name = "Tom";
p.age = 12;
p.setName = function (name) {
this.name = name;
};
// 测试
p.setName('康熙');
console.log(p.name,p.age);
方式二:对象字面量
套路:适用{}创建对象,同时指定属性/方法
适用场景:起始时对象内部数据是确定的
问题:如果创建多个人对象,有重复代码
var p = {
name: 'Tom',
age: 12,
setName: function (name) {
this.name = name;
}
}
// 测试
console.log(p.name,p.age);
p.setName('康熙');
console.log(p.name,p.age);
var p2 = { // 如果创建多个对象代码很重复
name: 'Bob',
age: 13,
setName: function (name) {
this.name = name;
}
}
方式三:工厂模式
套路:通过工厂函数动态创建对象并返回
适用场景:需要创建多个对象
问题:对象没有一个具体的类型,都是Object类型
function createPerson(name,age) { // 返回一个对象的函数===>工厂函数
var obj = {
name: name,
age: age,
setName: function(name) {
this.name = name;
}
}
return obj;
}
// 创建两个人
var p1 = createPerson('Tom',12);
var p2 = createPerson('Bob',13);
// p1/p2是Object类型
function createStudent(name,price) {
var obj = {
name:name,
price:price
}
return obj;
}
var s = createPerson('张三',10000000);
// s也是Object类型
方式四:自定义构造函数模式
套路:自定义构造函数,通过new创建对象
使用场景:需要创建多个类型确定的对象
问题:每个对象都有相同的数据,浪费内存
// 定义类型
function Person(name,age) {
this.name = name;
this.age = age;
this.setName = function(name) {
this.name = name;
}
}
var p1 = new Person('中国',5000);
console.log(p1);
console.log('国家:'+p1.name+'历史:'+p1.age);
var p2 = new Person('王八',300);
p2.setName('美国');
console.log(p2);
console.log('国家:'+p2.name+'历史:'+p2.age);
console.log(p1 instanceof Person);
function Student (name,price){
this.name = name;
this.price = price;
}
var s = new Student('Bob',13000);
console.log(s instanceof Student);
console.log(p1,p2);
方式五:构造函数+原型的组合模式
套路:自定义构造函数,属性在函数中初始化,方法添加到原型上
使用场景:需要创建多个类型确定的对象
function Person(name,age) { // 在构造函数中只初始化一般函数
this.name = name;
this.age = age;
}
Person.prototype.setName = function (name) {
this.name = name;
}
var p1 = new Person('Tom',23);
var p2 = new Person('jack',24);
继承模式
方式一:原型链继承
方式1:原型链继承
1. 套路
- 定义父类型构造函数
- 给父类型的原型添加方法
- 定义子类型的构造函数
- 创建父类型的对象赋值给子类型的原型
- 将子类型原型的构造属性设置为子类型
- 给子类型的对象:可以调用父类型的方法
2. 关键
- 子类型的原型为父类型的一个实例对象
// 父类型
function Supper() {
this.supProp = "父属性";
}
Supper.prototype.showSupperProp = function () { // showSupperProp 让所有Supper的实例都被能看见
console.log(this.supProp);
};
// 子类型
function Sub() {
this.subProp = "子属性" ;
}
// 子类型的原型为父类型的一个实例对象
Sub.prototype = new Supper();
// 让子类型的原型的constructor指向子类型
Sub.prototype.constructor = Sub;
Sub.prototype.showSubProp = function () {
console.log(this.subProp);
};
var sub = new Sub();
sub.showSupperProp();
// sub.toString();
sub.showSubProp();
console.log(sub.constructor); // constructor 输出sub的构造函数
方式二:借用构造函数继承(假的)
- 套路:
- 定义父类型构造函数
- 定义子类型构造函数
- 在子类型构造函数中调用父类型构造
- 关键:
- 在子类型构造函数中通用call()调用父类型构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
function Student(name, age, price) {
Person.call(this, name, age); // 相当于: this.Person(name,aeg)
this.price = price;
}
var s = new Student('Tom',20,14000);
console.log(s.name, s.age, s.price);
方式三:组合继承
- 利用原型链实现对父类型对象的方法继承
- 利用super()借用父类型构建函数初始化相同属性
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.setName = function (name) {
this.name = name;
};
function Student(name, age, price) {
Person.call(this, name, age); // 得到属性 // call() 让函数成为对象的方法调用
this.price = price;
}
Student.prototype = new Person(); // 为了能看到父类型的方法
Student.prototype.constructor = Student; // 修正constrictor属性
Student.prototype.setPrice = function (price) {
this.price = price;
};
var s = new Student("Tom", 24, 150000);
s.setName("Bob");
s.setPrice(160000000);
console.log(s.name, s.age, s.price);