Javascrip面向对象模式

最新推荐文章于 2025-03-02 17:53:06 发布

原创最新推荐文章于 2025-03-02 17:53:06 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了JavaScript中五种创建对象的不同方式：字面量、工厂模式、构造函数模式、原型模式以及结合构造函数和原型的方式，并分析了每种方式的特点与不足。

(function () {

    //字面量,会造成大量的重复代码

    var obj = {

        name: 'zhangsan',

        age: 18,

        showName: function () {

            console.log(this.name);

        }

    }



    var obj2 = {

        name: 'lisi',

        age: 28,

        showName: function () {

            console.log(this.name);

        }

    }



    obj.showName();

    obj2.showName();

})();



(function () {

    //工厂模式,解决了重复代码，但是无法识别对象(不能识别是对谁的引用)

    function obj(name,age) {

        var obj = new Object();

        obj.name = name;

        obj.age = age;

        obj.showName = function () {

            console.log(this.name);

        }

        return obj;
    }



    var obj1 = obj('zhangsan',18);

    var obj2 = obj('lisi',28);



    obj1.showName();

    obj2.showName();

    console.log(obj1 instanceof obj);

})();



(function () {

    //构造函数模式，解决了识别对象，但是每定义一个函数都实例化了一个对象

    function Obj(name,age){

        this.name = name;

        this.age = age;

        this.showName = function () {

            console.log(this.name);

        }

    }



    var obj1 = new Obj('zhangsan',18);

    var obj2 = new Obj('lisi',28);



    console.log(obj1 instanceof Obj);

    console.log(obj1.showName == obj2.showName);

})();



(function () {

    //原型模式,解决了每次定义函数的实例化，但是引用值修改会影响其他实例，而且没有传参数

    function Obj(){}

    Obj.prototype.name = 'zhangsan';

    Obj.prototype.age = 18;

    Obj.prototype.arr = [18,20,30];

    Obj.prototype.showName = function () {

        console.log(this.name);

    }



    var obj1 = new Obj();

    var obj2 = new Obj();



    obj1.arr.push(40);

    console.log(obj1.arr);

    console.log(obj2.arr);

    console.log(obj1.showName == obj2.showName);

})();



(function () {

    //构造函数+原型

    function Obj(name,age) {

        this.name = name;

        this.age = age;

        this.arr = [18,20,30];

    }



    Obj.prototype.showName = function () {

        console.log(this.name);

    }



    var obj1 = new Obj();

    var obj2 = new Obj();



    obj1.arr.push(40);

    console.log(obj1.arr);

    console.log(obj2.arr);

    console.log(obj1.showName == obj2.showName);

})();