Padrão de cadeia de protótipo (básico)

Padrão de cadeia de protótipo (básico)

案例一
function creat(name, age){
    
    
this.name=name;  
this.age=age;
this.write=function (){
    
    
console.log("i can write"+this.name);
};
}
var p1=new creat("xiaobai",13);
p1.write();
var p2=new creat("xiaohei",15);
p2.write();

console.log(p1.writeJs === p2.writeJs);>>false

O padrão construtor tem o conceito de classe e instância, e instâncias e instâncias são independentes umas das outrasidentificação de instância

案例一拓展
function creat(name, age){
    
    
this.name=name;  
this.age=age;
creatjsPerson.prototype.writeJs=function(){
    
    
console.log("i can write"+this.name);
};
};
var p1=new creat("xiaobai",13);
p1.write();
var p2=new creat("xiaohei",15);
p2.write();

console.log(p1.writeJs === p2.writeJs);>>true

O modo protótipo baseado no modo construtor resolve o problema de métodos ou propriedades públicas

Extraia as mesmas propriedades e métodos entre instâncias em propriedades e métodos públicos e
coloque-os em creatjsPerson.prototype se desejar que sejam públicos

1. Princípio

1), cada tipo de dado de função (função ordinária, classe) tem uma propriedade embutida: prototype (prototype), e esta propriedade é o valor de um tipo de dado de objeto
2), e no protótipo, o navegador nasce para dar Ele adicionou um construtor de propriedade (construtor), o valor da propriedade é a própria função atual (classe)
3), cada tipo de dado do objeto (objeto comum, instância, protótipo...) também vem com uma propriedade: proto , o valor da propriedade é the current O protótipo da classe à qual a instância pertence (protótipo)

案例二
function Fn(){
    
    
this.x=100;
}
Fn.prototype.getX=function (){
    
    
console.log(this.x);
};
var f1=new Fn;
var f2=new Fn;
console.log(Fn.prototype.constructor === Fn);
>>true

2. object é a classe base de todos os tipos de dados de objetos em js (a classe de nível superior)

1), f1 instanceof Object>>true>> Porque f1 pode olhar para o superior através de __proto__, não importa quantos níveis, Object sempre pode ser encontrado no final
2), não há atributo __proto__ em object.prototype

3. Modo de cadeia de protótipos

f1.hasOwnProperty("x");
hasOwnProperty é uma propriedade de f1

Mas descobrimos que não existe tal método na propriedade privada de f1, então como lidar com isso?

1) Ao obter o valor do atributo através do método "nome do objeto.nome do atributo", primeiro pesquise no atributo privado do objeto, caso este atributo exista no privado, obtém-se o valor do atributo privado.

1. Se não houver um privado, use __proto__ para encontrar o protótipo da classe a que pertence (as propriedades e métodos definidos no protótipo da classe são todos propriedades e métodos públicos da instância atual). Se o protótipo existir , o valor da propriedade pública é obtido.

2. Se não houver protótipo, continue a pesquisar para cima através de __proto__ no protótipo até que Object.prototype seja encontrado
. O mecanismo desta pesquisa é o modo de cadeia de protótipos

案例三
f1.getX===f2.getX>>true
f1.__proto__.getX===f2.getX
>>true
f1.getX===Fn.prototype.getX
>>true

案例三拓展
function Fn(){
    
    
this.x=100;
this.sum=function(){
    
    };
}
Fn.prototype.getX=function (){
    
    
console.log(this.x);
};
Fn.prototype.sum=function (){
    
    
console.log(this.x);
};
var f1=new Fn;
var f2=new Fn;
f1.sum===f2.__proto__.sum
>>false
f1.sum===Fn.prototype.sum;
>>false

2）f1.hasOwnProperty>>f1. proto . proto .hasOwnProperty

No navegador IE, nosso modo de protótipo é o mesmo princípio, mas o navegador IE tem medo de que você modifique o público por meio de __proto__ e proíba o uso de __proto__

案例四
f1.sum=function(){
    
    
>>修改自己私有的sum
};
f1.__proto__.sum=function(){
    
    
>>修改所属类原型上的sum
};
Fn.prototype.sum=function(){
    
    
>>修改公有的sum
}