设计模式(3)[JS版]-JavaScript中的构造函数模式是什么？

AlbertYang

发布于 2020-09-08 15:40:25

1K0

发布于 2020-09-08 15:40:25

1 什么是构造函数模式

构造函数用于创建特定类型的对象一不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。在JavaScript里，构造函数通常是认为用来实现实例的，JavaScript没有类的概，但是有特殊的构造函数。通过new关键字来调用自定义的构造函数，在构造函数内部，this关键字引用的是新创建的对象。

2 构造函数模式的作用和注意事项

2.1 模式作用

1.用于创建特定类型的对象。

2．第一次声明的时候给对象赋值。

3．自己声明构造函数，赋予属性和方法。

2.2 注意事项

1．声明函数的时候处理业务逻辑。

2．区分和单例的区别，配合单例实现初始化。

3．建议构造函数以大写字母开头。

4. 注意new的成本。（继承）

3 代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>构造函数模式</title>
</head>
<body>
</body>
<script>
//Person本身是一个普通函数，但当通过new来创建对象时，
//Person就是构造函数,同时又充当了Java等语言中类的概念
function Person(name,age){
//防止调用函数时，没有用关键字new的时候报错
if(!(this instanceof Person)){
return new Person(name,age);
            }
this.name = name;
this.age = age;
this.sayName = function(){
//建议js中一般用单引号
return '我是:'+this.name+'年龄：'+this.age;
            }
        }
//创建对象小明
var xiaoMing = new Person('小明',20);
        alert(xiaoMing.sayName());
//创建对象小张
var xiaoZhang= new Person('小张',30,);
        alert(xiaoZhang.sayName());
</script>
</html>

要创建Person的实例，必须使用new操作符，new 关键字会进行如下的操作：

1 创建一个空的简单JavaScript对象（即{}）；//var o = new Object();

2 将这个构造函数的作用域赋给新对象（因此this就指向了这个新对象)；//o.__proto__ = Person.prototype;

3 将步骤1新创建的对象作为this的上下文；//Person.call(o);

3 执行构造函数中的代码(为这个新对象添加属性)；

4 如果该函数没有返回对象，则返回this(新对象)；

在前面例子中，xiaoMing和xiaoZhang分别保存着Person的不同实例。这两个对象都有一个constructor(构造函数)属性，该属性指向Person(构造函数):

console.log(xiaoMing.constructor === Person);//true
console.log(xiaoZhang.constructor === Person);//true

并且这两个实例可以链接到构造函数的原型：

console.log(xiaoMing.__proto__ === Person.prototype);//true
console.log(xiaoMing.__proto__ === Person.prototype);//true

可以通过instanceof检查对象的类型 (所有的对象均继承于Object):

console.log(xiaoZhang instanceof Person);//true
console.log(xiaoZhang instanceof Object);//true
console.log(xiaoMing instanceof Person);//true
console.log(xiaoMing instanceof Object);//true

4 构造函数模式与单例模式结合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        var Student = {
            Person: function(name, age) {
                if (!(this instanceof Student.Person)) {
                    return new Student.Person(name, age);
                }
                this.name = name;
                this.age = age;
                this.sayName = function() {
                    return '我是:' + this.name + '，年龄：' + this.age;
                }
            }
        }

        var Employee = {
            Person: function(name, age) {
                if (!(this instanceof Employee.Person)) {
                    return new Employee.Person(name, age);
                }
                this.name = name;
                this.age = age;
                this.sayName = function() {
                    return '我是:' + this.name + '，年龄：' + this.age;
                }
            }
        }

        var xiaoMing = new Student.Person('小明', 20);
        alert(xiaoMing.sayName());
        var xiaoZhang = new Employee.Person('小张', 30, );
        alert(xiaoZhang.sayName());
</script>
</html>

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-07-20，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

面向对象编程

本文分享自 AlbertYang 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

面向对象编程

登录后参与评论

0 条评论

热度