美文网首页
创建对象的几种方式

创建对象的几种方式

作者: 代艳霞 | 来源:发表于2020-04-27 20:19 被阅读0次

    1.工厂模式

    function createPerson(name, age, job) {
            var o = new Object();
            o.name = name;
            o.age = age;
            o.job = job;
            o.sayName = function () {
                alert(this.name);
            }
            return o;
        }
    
    • 使用方式
     var gby = createPerson("gby", 28, "architect");
     var dyx = createPerson("dyx", 28, "web");
    

    2.构造函数(缺点:每个方法需要在原型上构建一遍,重复)

    function Person(name, age, job) {
            this.name = name;
            this.age = age;
            this.job = job;
            this.sayName = function () {
                alert(this.name);
            }
        }
    
    
    • 使用方式及测试
      var person1 = new Person('wxx', 29, 'taobao');
        var wl = new Person('wl', 39, 'free');
        console.log("person1:constructor:", person1.constructor);
        //检测对象类型
        console.log(person1 instanceof Object);
        console.log(person1 instanceof Person);
    

    3.原型模式(原型上的引用类型如果被修改--所有的实例也会被修改--违背了每个实例需要有自己的独有属性的原则);

    第1种写法

    function Pro() {
        };
        Pro.prototype.name = "Nick";
        Pro.prototype.age = 29;
        Pro.prototype.job = "articher";
        Pro.prototype.speakName = function () {
            console.log(this.name);
        };
    
    • 使用方式
      var pro1 = new Pro();
        pro1.speakName();
        var pro2 = new Pro();
        pro2.speakName();
    
        //测试某个原型是否是某个实例
        console.log(Pro.prototype.isPrototypeOf(pro1));
        console.log(Pro.prototype.isPrototypeOf(pro2));
    
        //获取对象的原型__proto__
        console.log("Object.getPrototypeOf(pro1):", Object.getPrototypeOf(pro1) == Pro.prototype);
        //hasOwnProperty()判断属性存在于实例还是原型(属性存在于实例时才返回true)
        console.log("hasOwnPrototype:", pro1.hasOwnProperty("name"));
        pro1.like = "footer";
        console.log("in:", ("like" in pro1));
        console.log("in:", pro1.hasOwnProperty("like"));
    

    第2种写法

        //原型写法
        function Propertys() {
        };
        var friend1 = new Propertys();
        console.log("friend1.job:", friend1.job);
        Propertys.prototype = {
            constructor: Propertys,
            name: "gby",
            age: 29,
            job: "free",
            arr: ["gby", "dyx"]
        };
        console.log("friend1.job:", friend1.job);
        var friends2 = new Propertys();
        console.log("friends2.job:", friends2.job);
    
        //  原型的弊端
        var add1 = new Propertys();
        add1.arr.push("wxl");
        console.log("add1.arr:", add1.arr);
        var add2 = new Propertys();
        console.log("adds.arr:", add2.arr);
    

    4.组合使用原型模式和构造函数模式;

     function ConstructorPrototype(name, age, job) {
            this.name = name;
            this.age = age;
            this.job = job;
        }
    
        ConstructorPrototype.prototype = {
            constructor: ConstructorPrototype,
            sayName: function () {
                console.log("ConstructorPrototype.name:", this.name);
            }
        }
    
    • 使用方式
     var cons1 = new ConstructorPrototype("dyx", 29, "web");
        var cons2 = new ConstructorPrototype("mm", 56, "peasant");
        cons1.sayName();
        cons2.sayName();
    

    5.动态原型模式(确定某些方法是否存在--决定是否还需要初始化)

     function DynamicConstructorPrototype(name, age, job) {
            this.name = name;
            this.age = age;
            this.job = job;
            if (typeof sayName != "function") {
                DynamicConstructorPrototype.prototype.sayName = function () {
                    console.log("DynamicConstructorPrototype.name:", this.name);
                }
            }
        }
    
    • 使用方式
    var dyna1 = new DynamicConstructorPrototype("dyx1", 29, "web1");
    
    dyna1.sayName();
    

    6.寄生构造函数模式

    function ParasiticConstructor(name, age, job) {
            var o = new Object();
            o.name = name;
            o.age = age;
            o.job = job;
            o.sayName = function () {
                console.log("ParasiticPrototype.name:", this.name);
            }
            return o;
        }
    
    • 使用方式
    var para1 = new ParasiticConstructor("dyx2", 29, "teacher");
    
    para1.sayName();
    
    function SpecialArray() {
            //创建数组
            var values = new Array();
            //添加值
            values.push.apply(values, arguments);
            // 添加方法
            values.piedString = function () {
                return this.join("|");
            }
            return values;
        }
    var colors = new SpecialArray("red", "green", "blue");
    console.log("colors:",colors.piedString());
    

    7.稳妥构造函数模式(一:新创建的实例方法不引用this,二,不使用new操作符调用构造函数)

      function ReliableConstructor(name,age,job){
            //创建被返回的对象;
            var o = new Object();
            o.sayName=function(){
                console.log("reliable:",name)
            }
            return o;
        }
    
    • 使用方式
    var relibleName = ReliableConstructor("reliabledyx",29,"web");
    
    relibleName.sayName();
    
    //原型链
        function SuperType(){
            this.property = true;
        }
      SuperType.prototype.getSuperValue=function(){
            return this.property;
      }
      function SubType(){
            this.subProperty = false;
      };
        SubType.prototype = new SuperType();
        SubType.prototype.getSubvalue =function(){
            return this.subProperty;
        }
    var instance = new SubType();
        console.log("instance:",instance.getSuperValue());
    

    8.借用构造函数

     function SupType(){
            this.color=["red","green","yellow"];
        }
        function SbType(){
            SupType.call(this);
        }
    
    • 使用方式
     var colo1 = new SbType();
        colo1.color.push("black");
        alert(colo1.color);
        var colo2 = new SbType();
        alert(colo2.color);
    

    原型扩展方法

        String.prototype.startWidth = function (text) {
            return this.indexOf(text) == 0;
        };
        var str = "hello world";
        console.log(str.startWidth("hello"));
    

    相关文章

      网友评论

          本文标题:创建对象的几种方式

          本文链接:https://www.haomeiwen.com/subject/ttmhmhtx.html