Apprenez le javascript orienté objet et comprenez les compétences en matière de prototype javascript et de prototype chain

Regardez d'abord une image et faites le tri.

1.Concepts de base
[Chaîne de prototypes]Chaque constructeur a un objet, l'objet prototype contient un pointeur vers le constructeur et l'instance contient un pointeur interne vers l'objet prototype. Ensuite, si l'objet prototype est égal à une instance d'un autre prototype, l'objet prototype contiendra à ce moment un pointeur vers l'autre prototype. De manière correspondante, l'autre prototype contient également un pointeur vers un autre constructeur. Si un autre prototype est une instance d’un autre prototype, alors la relation ci-dessus est toujours valable. Cette progression couche par couche forme une chaîne d'instances et de prototypes.
【Objet prototype】Cet objet contient des propriétés et des méthodes qui peuvent être partagées par toutes les instances d'un type spécifique. Tous les types de référence héritent de Object par défaut, et cet héritage est également implémenté via la chaîne de prototypes. Le prototype par défaut de toutes les fonctions est une instance d'Object, donc le prototype par défaut contiendra un pointeur interne pointant vers Object.prototype. C'est pourquoi tous les types personnalisés hériteront des méthodes toString() et valueOf()
. [Constructeur]La différence entre les constructeurs et les autres fonctions réside dans la manière dont ils sont appelés. D'une manière générale, tant qu'une fonction est appelée via l'opérateur new, elle peut être utilisée comme constructeur ; si elle n'est pas appelée via l'opérateur new, elle n'est pas différente d'une fonction ordinaire.
[Note] Les fonctions définies par l'utilisateur et les constructeurs intégrés en JavaScript peuvent être utilisés comme constructeurs
[Comment écrire les constructeurs]Les constructeurs doivent toujours commencer par une lettre majuscule, tandis que les non-constructeurs doivent commencer par une lettre minuscule. Cette approche est empruntée à d'autres langages OO, principalement pour la distinguer des autres fonctions d'ECMAScript car le constructeur lui-même est aussi une fonction, mais il peut être utilisé pour créer des objets
[Trois scénarios d'utilisation du constructeur]
[a] Utiliser comme constructeur

var person = new Person("Nicholas",29,"software Engineer");
person.sayName();

Copier après la connexion

[b] Appelé comme une fonction normale

Person("greg",27,"doctor");//添加到window
window.sayName();//"Greg"

Copier après la connexion

[c] Appeler
dans la portée d'un autre objet

var o = new Object();
Person.call(o,"Kristen",25,"Nurse");
o.sayName();//"Kristen"

Copier après la connexion

【prototype属性】只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。
[注意]只有函数才有prototype属性，object没有prototype属性
【constructor属性】在默认情况下，所有原型对象都会自动获得一个constructor(构造函数)属性，这个属性包含一个指向prototype属性所在函数的指针
[注意]创建了自定义的构造函数之后，其原型对象默认只会取得constructor属性，至于其他方法则都是从Object继承而来的
【_proto_和[[prototype]]】当调用构造函数创建一个新实例后，该实例的内部将包含一个指针(内部属性)，指向构造函数的原型对象。ECMA-262第5版管这个指针叫[[prototype]]。虽然在脚本中标准的方式访问[[prototype]]，但firefox\safari\chrome在每个对象上都支持一个属性_proto_;而在其他实现中，这个属性对脚本则是完全不可见的。这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间
二、基本操作　　
【原型链查询】每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始，如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性，如果找到了这个属性，则返回该属性的值。
【添加实例属性】当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性；换句话说，添加这个属性只会阻止我们访问原型中的那个属性，但不会修改那个属性，即使将这个属性设置为null,也只会在实例中设置这个属性，而不会恢复其指向原型的连接。不过，使用delete操作符则可以完全删除实例属性，从而让我们能够重新访问原型中的属性。
【原型的动态性】由于在原型中查找值的过程是一次搜索，因此我们对原型对象所做的任何修改都能立即从实例上反映出来，即使是先创建了实例后修改原型也照样如此。
[注意]不推荐在产品化的程序中修改原生对象的原型

function Person(){};
var friend = new Person();
Person.prototype.sayHi = function(){
  alert('hi');
}
friend.sayHi();//"hi"

Copier après la connexion

【重写原型】调用构造函数时会为实例添加一个指向最初原型的[[prototype]]指针，而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。实例中的指针仅指向原型，而不指向构造函数。
三、基本方法　　
[1]isPrototypeOf()：判断实例对象和原型对象是否存在于同一原型链中，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型

function Person(){};
var person1 = new Person();
var person2 = new Object();
console.log(Person.prototype.isPrototypeOf(person1));//true
console.log(Object.prototype.isPrototypeOf(person1));//true
console.log(Person.prototype.isPrototypeOf(person2));//false
console.log(Object.prototype.isPrototypeOf(person2));//true

Copier après la connexion

[2]ECMAScript5新增方法Object.getPrototypeOf():这个方法返回[[Prototype]]的值

function Person(){};
var person1 = new Person();
var person2 = new Object();
console.log(Object.getPrototypeOf(person1)); //Person{}
console.log(Object.getPrototypeOf(person1) === Person.prototype); //true
console.log(Object.getPrototypeOf(person1) === Object.prototype); //false
console.log(Object.getPrototypeOf(person2)); //Object{}

Copier après la connexion

[3]hasOwnProperty():检测一个属性是否存在于实例中

function Person(){
  Person.prototype.name = 'Nicholas';
}
var person1 = new Person();
//不存在实例中，但存在原型中
console.log(person1.hasOwnProperty("name"));//false
//不存在实例中，也不存在原型中
console.log(person1.hasOwnProperty("no"));//false
person1.name = 'Greg';
console.log(person1.name);//'Greg'
console.log(person1.hasOwnProperty('name'));//true
delete person1.name;
console.log(person1.name);//"Nicholas"
console.log(person1.hasOwnProperty('name'));//false

Copier après la connexion

[4]ECMAScript5的Object.getOwnPropertyDescriptor():只能用于取得实例属性的描述符，要取得原型属性的描述符，必须直接在原型对象上调用Object.getOwnPropertyDescription()方法

function Person(){
  Person.prototype.name = 'Nicholas';
}
var person1 = new Person();
person1.name = 'cook';
console.log(Object.getOwnPropertyDescriptor(person1,"name"));//Object {value: "cook", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(Person.prototype,"name"));//Object {value: "Nicholas", writable: true, enumerable: true, configurable: true}

Copier après la connexion

[5]in操作符:在通过对象能够访问给定属性时返回true，无论该属性存在于实例还是原型中

function Person(){}
var person1 = new Person();
person1.name = 'cook';
console.log("name" in person1);//true
console.log("name" in Person.prototype);//false
var person2 = new Person();
Person.prototype.name = 'cook';
console.log("name" in person2);//true
console.log("name" in Person.prototype);//true

Copier après la connexion

[6]同时使用hasOwnProperty()方法和in操作符，来确定属性是否存在于实例中

//hasOwnProperty()返回false,且in操作符返回true，则函数返回true，判定是原型中的属性
function hasPrototypeProperty(object,name){
  return !object.hasOwnProperty(name) && (name in object);
}
function Person(){
  Person.prototype.name = 'Nicholas';
}
var person1 = new Person();
console.log(hasPrototypeProperty(person1,'name'));//true
person1.name = 'cook';
console.log(hasPrototypeProperty(person1,'name'));//false
delete person1.name;
console.log(hasPrototypeProperty(person1,'name'));//true
delete Person.prototype.name;
console.log(hasPrototypeProperty(person1,'name'));//false

Copier après la connexion

[7]ECMAScript5的Object.keys()方法:接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组
[注意]一定要先new出实例对象再使用该方法，否则为空

function Person(){
  Person.prototype.name = 'Nicholas';
  Person.prototype.age = 29;
  Person.prototype.job = 'Software Engineer';
  Person.prototype.sayName = function(){
    alert(this.name);
  }  
};
var keys = Object.keys(Person.prototype);
console.log(keys);//[]
var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var keys = Object.keys(Person.prototype);
console.log(keys);//["name","age","job","sayName"]
var p1Keys = Object.keys(p1);
console.log(p1Keys);//["name","age"]

Copier après la connexion

[8]ECMAScript5的Object.getOwnPropertyNames()方法:接收一个对象作为参数，返回一个包含所有属性的字符串数组
[注意]一定要先new出实例对象再使用该方法，否则只有constructor

function Person(){
  Person.prototype.name = 'Nicholas';
  Person.prototype.age = 29;
  Person.prototype.job = 'Software Engineer';
  Person.prototype.sayName = function(){
    alert(this.name);
  }  
};
var keys = Object.getOwnPropertyNames(Person.prototype);
console.log(keys);//["constructor"]
var p1 = new Person();
var keys = Object.getOwnPropertyNames(Person.prototype);
console.log(keys);//["constructor", "name", "age", "job", "sayName"]

Copier après la connexion

希望本文所述对大家学习javascript程序设计有所帮助。