7中创建对象的方式(工厂模式、构造函数模式、原型模式、动态原型模式等分析)

1、工厂模式

    // 定义工厂函数
    function createPerson(name, age, hobby) {
        // 创建一个临时object对象
        var obj = new Object();
        // 将工厂函数的参数赋值给临时对象
        obj.name = name;
        obj.age = age;
        obj.hobby = hobby;
        obj.sayName = function() {
            console.log("我的名字叫:"+this.name);
        }
        // 返回这个包装好的临时对象
        return obj;
    }
    //使用工厂函数创建对象
    var p1 = createPerson(‘Tom‘, 12, "sing");
    var p2 = createPerson(‘mayra‘, 18, "draw");
        

解决问题:用于创建的批量相似对象

2、构造函数模式

    // 定义构造函数
    function Person(name, age, hobby) {
        this.name = name;
        this.age = age;
        this.hobby = hobby;
        this.sayName = function() {
            console.log("我的名字叫:"+this.name);
        }
    }
    // 使用构造函数实例化
    var p1 = new Person(‘Tom‘, 12, "sing");
    var p2 = new Person(‘mayra‘, 18, "draw");

步骤分析:

  1. 使用new关键字在内存中创建一个新对象;
  2. 将构造函数的this指向这个新对象;
  3. 使用this为这个对象添加属性和方法
  4. 返回这个对象

解决的问题:构造函数可以将实例化的对象标识为一种特定的类型

存在的问题:相同的方法每次实例化都要重新创建一遍,浪费内存

3、原型模式

    // 定义构造函数
    function Person() {

    }
    // 定义原型
    Person.prototype = {
        constructor: Person,  //重写constructor
        name: ‘Tom‘,
        books: [‘数学‘,‘英语‘], // 引用类型
        country: "china", // 共享属性
        sayName: function () {  // 共享方法
            console.log("我的名字叫:" + this.name);
        },
    };
    // 使用构造函数实例化
    var p1 = new Person();
    var p2 = new Person();
    p1.books.push(‘语文‘);
    console.log(p1.books);  // ‘数学‘,‘英语‘,‘语文‘
    console.log(p2.books);  // ‘数学‘,‘英语‘,‘语文‘    p1实例影响到p2!!!

问题:属性和方法都定义在了原型上,1、不能传参构造不同属性的对象 2、对于包含引用类型值的属性来说,实例之间会相互影响

这种单独使用原型模式的方法基本没人使用!

4、构造函数模式和原型模式组合使用(默认使用的模式!!!)

    // 定义构造函数
    function Person(name, age, hobby) {
        this.name = name;
        this.age = age;
        this.hobby = hobby;
        this.books = [‘数学‘,‘英语‘]; //引用类型
    }
    // 定义原型(定义共享的属性)
    Person.prototype = {
        constructor: Person,  //重写constructor
        country: "china", // 共享属性
        sayName: function () {  // 共享方法
            console.log("我的名字叫:" + this.name);
        },
    };
    // 使用构造函数实例化
    var p1 = new Person(‘Tom‘, 12, "sing");
    var p2 = new Person(‘mayra‘, 18, "draw");
    p1.books.push(‘语文‘);
    console.log(p1.books);  // ‘数学‘,‘英语‘,‘语文‘
    console.log(p2.books);  // ‘数学‘,‘英语‘    p1实例不会影响到p2!!!
    console.log(p1.country);  // china
    console.log(p2.country);  // china
    p1.sayName();   // 我的名字叫:Tom
    p2.sayName();   // 我的名字叫:mayra

解决了构造函数模式共享方法多次创建问题,也解决了原型模式出现引用类型属性时存在的问题,目前最为常用的方式

5、动态原型模式

特点:将所有信息都封装在构造函数类,动态初始化原型

    // 定义构造函数
    function Person(name, age, hobby) {
        this.name = name;
        this.age = age;
        this.hobby = hobby;
        //  判断当前是否具有sayName方法,没有就初始化原型添加该方法
        if(typeof this.sayName != ‘function‘) {
            // 这个只会在第一次使用构造函数时执行
            Person.prototype.sayName = function () {
                console.log("我的名字叫:" + this.name);
            }
        }

    }
    // 使用构造函数实例化
    var p1 = new Person(‘Tom‘,13,‘sing‘);
    var p2 = new Person(‘bob‘,16,‘draw‘);
    p1.sayName();
    p2.sayName();
    

解决问题:这样构造函数更像一个整体

6、寄生构造函数模式

    function Person(name, age, hobby) {
        // 创建一个临时object对象
        var obj = new Object();
        // 将参数赋值给临时对象
        obj.name = name;
        obj.age = age;
        obj.hobby = hobby;
        obj.sayName = function() {
            console.log("我的名字叫:"+this.name);
        };
        // 返回这个包装好的临时对象
        return obj;
    }
    //使用函数创建对象
    var p1 = new Person(‘Tom‘, 12, "sing");
    var p2 = new Person(‘mayra‘, 18, "draw");

其实就是构造函数样子的工厂模式,意义不大,不推荐使用

7、稳妥构造函数模式

    function Person(name) {
        // 创建一个临时object对象
        var obj = new Object();

        obj.sayName = function() {
            console.log(this.name);
        };
        // 返回这个包装好的临时对象
        return obj;
    }
    //函数创建对象
    var p1 = new Person(‘Tom‘);
    var p2 = new Person(‘mayra‘);
    p1.sayName(); //Tom  只能通过这一种方式访问name的值

用处:提供固定访问成员的方法,适合在某些安全执行环境

以上不同环境下适合使用不同的模式创建对象,4、5两种模式较为常用。

原文地址:https://www.cnblogs.com/mengjingmei/p/9383372.html

时间: 2024-10-21 22:53:10

7中创建对象的方式(工厂模式、构造函数模式、原型模式、动态原型模式等分析)的相关文章

JavaScript 中实现继承的方式(列举3种在前一章,我们曾经讲解过创建类的最好方式是用构造函数定义属性,用原型定义方法。)

第一种:对象冒充 function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.color); }; } function ClassB(sColor, sName) { this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod; this.name = sName; this.sayName = f

深入理解JavaScript中创建对象模式的演变(原型)

创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Object构造函数和对象字面量方法 工厂模式 自定义构造函数模式 原型模式 组合使用自定义构造函数模式和原型模式 动态原型模式.寄生构造函数模式.稳妥构造函数模式 第一部分:Object构造函数和对象字面量方法 我之前在博文<javascript中对象字面量的理解>中讲到过这两种方法,如何大家不熟悉,可以点进去看一看回顾一下.它们的优点是用来创建单个的对象非常方

JS中对象继承方式

JS对象继承方式 摘自<JavaScript的对象继承方式,有几种写法>,作者:peakedness 链接:https://my.oschina.net/u/3970421/blog/2872629 方式一:对象冒充 原理:构造函数使用this关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使Parent构造函数称为Children的方法,然后调用它.Children会收到Parent的构造函数中定义的属性和方法. *** //父类构造函数 var P

JavaScript 创建对象之单例、工厂、构造函数模式

01单例模式 首先看一个问题,我们要在程序中描述两个人,这两个人都有姓名和年龄,可能刚刚开始学习js的时候会写成这样: 1 var name1 = 'iceman'; 2 var age1 = 25; 3 4 var name2 = 'mengzhe'; 5 var age2 = 26; 以上的写法的确是描述两个人,每个人都有姓名和年龄,但是每个人的姓名和年龄并没有放在一起,也就是说每个人的年龄和姓名并没有对应起来.这时候我们就引出对象的概念:把描述同一个事物(同一个对象)的属性和方法放在同一个

js中创建对象方式----原型模式

一.什么是原型模式 在js中,创建对象的方式有工厂模式和构造函数模式等: 而构造函数模式最大的问题在于:构造函数中的每个方法都需要在实例对象中重新创建一遍,不能复用,所以为了解决这一个问题,就需要使用原型模式来创建对象.原型模式是把所有实例共享的方法和属性放在一个叫做prototype(原型)的属性中 ,在创建一个函数时都会有个prototype属性, 这个属性是一个指针,指向一个对象,是通过调用构造函数而创建的那个对象实例的原型对象. // 构造函数 function Person() {};

JavaScript创建对象的默认方式:组合使用构造函数模式和原型模式

由于 JavaScript中没有类,对象充当着一系列集合的模板,包含着属性和方法,而每个对象中也有一个原型对象,可以存放共享方法和属性 . 创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式.构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性 //组合使用构造函数模式(构造函数设置自己的属性)和原型模式(原型设计那些共享的方法和属性) function Person(name,age,job){ this.name=name; this.age=age; this.jo

面向对象编程-基础(工厂、构造函数、原型、混合、动态等模式)

本文参考:js高级程序设计 第三版这篇文章我啃了大半天写的,是很烦,没有毅力看下去的注定还是不会(1).工厂模式:封装一个函数createPerson,这个函数可以创造一个人对象,包含三个属性和一个方法,然后利用这个函数分别创建了2个对象p1,p2. function createPerson(name,age,job){ var p=new Object(); p.name=name; p.age=age; p.job=job; p.showName=function(){ alert(thi

javascript中创建对象的几种方式

javascript中提供了通过Object构造函数或对象字面量方式来创建单个的对象,当我们想要创建很多对象的时候,简单的通过这两种方法就会产生大量的重复.在此,我总结了几种创建对象的模式.本文是在我阅读<javascript高级程序设计>后总结而来. 1.工厂模式 这种模式通过用函数来减少代码重复,利用函数的参数作为接口,与对象的属性与方法对接. function createfactory(name,age){ var obj = new Object(); obj.name = name

JavaScript提高篇之面向对象之单利模式工厂模型构造函数原型链模式

1.单例模式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>面向对象之单例模式</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 //对象数据类型