Padrão de Objeto JavaScript

Modo de fábrica

Vantagens e desvantagens do modo de fábrica

• Semelhante à fábrica real
• Um novo objeto é criado dentro da função e, finalmente, o novo objeto após o processamento é retornado
• (Desvantagens) Embora new seja uma nova função em comum, mas os métodos sejam comparados, ela retorna false, ou seja, a nova função, o método chinês, não compartilha o mesmo endereço.

//对象举例
function createObject(){
    //先创建一个新对象
    var obj=new Object();
    //赋予新对象属性
    obj.name="西瓜汁"; //属性
    //赋予新对象方法
    obj.run=function(){
        return "贴了商标了";
    }
    //返回对象
    return obj;//出厂 
}
var o1=new createObject();
var o2=new createObject();
console.log(o1===o2); //false;

Padrão do construtor

Diferença do modo de fábrica

• No construtor, não há necessidade de criar um objeto internamente (adicione propriedades, métodos e retorne objetos a esse objeto)
• Se você deseja escrever um padrão de construtor, a primeira letra da função precisa ser maiúscula

//对象举例
function  CreateFn(){
    this.str="构造函数";
    this .run=function(){
        return "js构造函数方法";
    }
}
//创建新对象
var obj1=new CreateFn();
var obj2=new CreateFn();
//输出
console.log(obj1.str);
console.log(obj2.str);
console.log(obj1.run===obj2.run); //false

Modo de protótipo

• Sempre que uma função é criada, existe uma propriedade prototype (function)
• Um ponteiro de protótipo (protótipo) para essa propriedade aponta para um objeto, e o objetivo desse objeto pode ser compartilhado por métodos e propriedades de todas as instâncias de objeto de um tipo específico.
• Protótipo (protótipo) é compartilhar todas as propriedades e métodos, ou seja, se 2 novas funções (instanciação), seus métodos são compartilhados, a comparação retorna verdadeira.

Desvantagens

• Por ser um método compartilhado, o mesmo endereço de memória é compartilhado.Se um for modificado posteriormente, todos serão modificados.

//对象举例
function fn(){
    fn.prototype.userName="张三";
    fn.prototype.run=function(){
        return "这是一个共享的方法";
    }
}
var obj1=new fn();
var obj2=new fn();
console.log(obj1.run===obj2.run); //true  说明这两个方法是共享的

Combinação de padrão de construtor e protótipo

• Construtor: define propriedades da instância. (Privado)
• Protótipo: definir e compartilhar atributos
• Vantagens: Cada instância terá seu próprio atributo de instância, mas, ao mesmo tempo, compartilhará o mesmo método.

//对象举例
function CreateFn(){
    this.userName="zhangsan";
    this.age=18;
    this.arr=[1,2,3];
}
//共享方法
CreateFn.prototype.run=function(){
    return "我是共享的";
}

//创建新的对象
var obj1=new CreateFn();
var obj2=new CreateFn();
console.log(obj1.run===obj2.run); //true
//修改obj1的属性
obj1.arr[1]="李四";
console.log(obj1.arr); // [1,"李四",3]
console.log(obj2.arr); ///[1,2,3]

//传参数
//对象举例
function CreateFn(name,age) {
    this.userName = name;
    this.age = age;
    this.arr = [1, 2, 3];
}
//共享方法
CreateFn.prototype.run = function () {
    return "我是共享的";
}

//创建新的对象
var obj1 = new CreateFn("张三",18);
var obj2 = new CreateFn("李四",22);
console.log(obj1.userName); //张三
console.log(obj2.userName); //李四

Modo de protótipo dinâmico

• O modo de protótipo dinâmico é encapsular todas as informações (propriedades e métodos) no construtor e inicializar o protótipo através do construtor
• Solução: O protótipo é inicializado quando o primeiro objeto é instanciado, o último não precisa ser inicializado.

function CreateFn(){
    this.userName="张三";
    //原型只初始化一次
    if(typeof this.run!="function"){
        console.log(1111);
        CreateFn.prototype.run=function(){
            return "共享的run方法"
        }
    }
}
var obj1=new CreateFn();
var obj2=new CreateFn();