Skip to content
On this page

创建对象模式

对象的创建模式

  • 构造函数模式
javascript
var p = new Object()
p.name = 'mondo'
p.setName = function(name) {
    this.name = name
}
  • 对象字面量模式
javascript
var p = {
    name: 'Mondo',
    setName: function(name) {
        this.name = name
    }
}
  • 工厂模式

对象没有一个具体的类型,都是 Object 类型

javascript
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('Mondo', 18)
  • 自定义构造函数模式

每个对象都有相同的数据,浪费内存

javascript
// 定义类型
function Person(name) {
    this.name = name
    this.setName = function(name) {
        this.name = name
    }
}
var p = new Person('Tom')
p.setName('jack')
  • 构造函数 + 原型的组合模式
javascript
function Person(name) {
    this.name = name
}
Person.prototype.setName = function(name) {
  this.name = name
}
var p1 = new Person('Tom')
var p2 = new Person('Mondo')

继承模式

原型链继承

javascript
// 父类型
function Supper() {
    this.supProp = 'Supper prototype'
}
Supper.prototype.showSupperProp = function() {
    console.log(this.supProp)
}

// 子类型
function Sub() {
    this.subProp = 'Sub prototype'
}

Sub.prototype = new Supper() // 子类型的原型为父类型的一个实例对象
// 让子类型的原型的constructor指向子类型
Sub.prototype.constructor = Sub
Sub.prototype.showSubProp = function() {
    console.log(this.subProp)
}

var sub = new Sub()
sub.showSupperProp() // 可调用父类型方法

构造函数继承借用构造函数继承

javascript
function Person(name, age) {
  	this.name = name
  	this.age = age
}
function Student(name, age, price) {
  	Person.call(this, name, age)
  	this.price = price
}

var s = new Student('mondo', 20, 1200)
console.log(s.name, s.age, s.price)

组合继承

javascript
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)
  	this.price = price
}
Student.prototype = new Person()
Student.prototype.constructor = Student
Student.prototype.setPrice = function(price) {
  	this.price = price
}

var s = new Student('mondo', 20, 1200)
s.setName('tom')
s.setPrice(1600)

new一个对象背后做了什么

  • 创建一个空对象 Fn.prototype = {}
  • 给对象设置 __proto__,值为构造函数对象的 prototype 属性值,this.__proto__=Fn.prototype
  • 执行构造函数体(给对象添加属性/方法)