创建对象的几种方式

2020-04-27  本文已影响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"));
上一篇 下一篇

猜你喜欢

热点阅读