对象的创建模式

Object构造函数模式

套路：先创建空Object对象，再动态添加属性/方法

使用场景：起始时不确定对象内部数据

问题：代码量多

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    var p = new Object() 
    p.name = "思懿" 
    p.age = 18
    p.setName = function (name) {
        this.name = name 
    } 

    // 测试
    p.setName("陈若") 
    console.log(p.name, p.age) // 陈若 18
</script>

对象字面量模式

套路：使用{}创建对象，同时指定属性和方法

适用场景：起始时对象内部数据时确定的

问题：如果创建多个对象，有重复代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    var p = {
        name: "陈若",
        age: 18,
        setName: function (name) {
            this.name = name
        }
    }

    // 测试
    console.log(p.name, p.age) // 陈若 18
    p.setName("旺旺")
    console.log(p.name, p.age) //旺旺  18
</script>

工厂模式

套路：通过工厂函数动态创建对象并返回

适用场景：需要创建多个对象

问题：对象没有一个具体的类型，都是Object类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
    function createPerson(age, name) {    //返回一个对象的函数-->工厂函数  
        var obj = {
            age: age,
            name: name,
            setName: function () {
                this.name = name 
            }
        } 
        return obj 
    }

    var p1 = createPerson(18, "张三") 
    var p2 = createPerson(16, "李四") 

    console.log(p1) 
    console.log(p2) 

    function createCat(age, name) {
        var obj = {
            age: age,
            name: name,
            setName: function () {
                this.name = name 
            }
        } 
        return obj 
    }

    var c1 = createCat(5, "小狗")
    var c2 = createCat(10, "小猫")

    console.log(c1) 
    console.log(c2) 

</script>

自定义构造函数模式

套路：自定义构造函数，通过new创建对象

适用场景：需要创建多个类型确定的对象

问题：每个对象都有相同的数据，浪费内存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
    // 定义类型
    function Person(name, age) {
        this.name = name
        this.age = age
        this.setName = function () {
            this.name = name
        }
    }

    var p1 = new Person("陈若", 16)
    p1.setName("渣渣灰")
    console.log(p1.name, p1.age) //陈若  16
    console.log(p1 instanceof Person)  //true

    function Student(name, price) {
        this.name = name
        this.price = price
        this.setName = function () {
            this.name = name
        }
    }

    var s = new Student("熊大", 1000)
    console.log(s instanceof Student)  //true

    var p2 = new Person("Jack", 16)
    console.log(p1, p2) 
</script>

构造函数+原型组合模式

套路：自定义构造函数，属性在函数中初始化，方法添加到原型上

适用场景：需要创建多个类型确定的对象

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.setName = function (name) {
        this.name = name
    }

    var p1 = new Person("陈若", 16)
    var p2 = new Person("渣渣辉", 19)
    console.log(p1, p2) 
</script>

继承模式

原型链继承

套路

1.定义父类型的构造函数

2.给父类型的原型添加方法

3.定义子类型的构造函数

4.创建父类型的对象赋值给子类型的原型

5.将子类型原型的构造属性设置为子类型

6.给子类型原型添加方法

7.创建子类型的对象：可以调用父类型的方法

关键

子类型的原型为父类型的一个实例对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
    //  父类型
    function Supper() {
        this.supProp = "Supper的property" 
    }
    Supper.prototype.showSupperProp = function () {
        console.log(this.supProp) 
    }

    // 子类型
    function Sub() {
        this.subProp = "Sub的property" 
    }

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

    var sub = new Sub() 
    sub.showSupperProp() 
    sub.showSubProp() 

    console.log(sub)  //Sub
</script>

借用构造函数继承

套路
  • 定义父类型的构造函数
  • 定义子类型的构造函数
  • 在子类型构造函数中调用父类型构造
关键

在子类型构造函数中通用call()调用父类型构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    function Person(name, age) {
        this.name = name 
        this.age = age 
    }

    function Student(name, age, price) {
        Person.call(this, name, age)      //相当于：this.Person(name,age)

        /* 
        this.name = name 
        this.age = age  
        */

        this.price = price 
    }

    var s = new Student("陈若", 20, 14000) 
    console.log(s.name, s.age, s.price) 
</script>

组合继承

原型链+借用构造函数的组合继承

1.利用原型链实现对父类型对象的方法继承

2.利用call借用父类型构造函数初始化相同属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
    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   //修正constructor属性
    Student.prototype.setPrice = function (price) {
        this.price = price
    }

    var s = new Student("陈若", 24, 15000)
    s.setName("阿若")
    s.setPrice(16000)
    console.log(s.name, s.age, s.price)  
</script>