这篇文章，让你相识 JavaScript 中的原型(基本篇-图文)

JavaScript是一门动态说话, 你可以在任何时辰向工具上添加属性,如下

function Student() { 
 this.name = 'LeBron James'; 
 this.gender = 'Male'; 
 } 
 var studObj1 = new Student(); 
 studObj1.age = 15; 
 alert(studObj1.age); // 15 
 var studObj2 = new Student(); 
 alert(studObj2.age); // undefined 

正如上面的实例, age 属性附加在 studObj1 实例上. 然而 studObj2 实例没有这个属性, 由于 age 属性只在 studObj1 实例上界说了.

那么, 假如想在后期添加一个属性且能被全部的实例所共享, 该怎么办? 谜底这就本日主角 Prototype.

Prototype 是一个工具, 默认环境下与JavaScript中的任何一个函数或工具有关, 只是独一区别在于函数的prototype 属性是可会见和可修改的，而工具的prototype属性是不行见的.

默认环境下任何一个函数包括 Prototype 工具, 如下图:

prototype 工具是一种非凡范例的可列举工具, 可以将必要附加属添加到其上，这些属性将在其结构函数的全部实例之间共享。

我本身是一名从事了多年开拓的web前端老措施员，今朝告退在做本身的web前端私家定制课程，本年年头我花了一个月清算了一份最得当2019年进修的web前端进修干货，各类框架都有清算，送给每一位前端小搭档。

因此, 把上面的示例中行使函数的 prototype 来添加属性,以便于全部工具中都可以会见到, 如下:

function Student() { 
 this.name = 'LeBron James'; 
 this.gender = 'M'; 
 } 
 Student.prototype.age = 15; 
 var studObj1 = new Student(); 
 alert(studObj1.age); // 15 
 var studObj2 = new Student(); 
 alert(studObj2.age); // 15 

行使 字面量 或 通过 new要害字和结构函数 的方法建设的每一个工具都包括 __proto__ 属性, 该属性指向建设此工具的函数的 原型工具.

你可以在谷歌和火狐开拓者调试器材中查察该属性(__proto__) , 按照下面的示例:

function Student() { 
 this.name = 'LeBron James'; 
 this.gender = 'M'; 
 } 
 var studObj = new Student(); 
 console.log(Student.prototype); // object 
 console.log(studObj.prototype); // undefined 
 console.log(studObj.__proto__); // object 
 console.log(typeof Student.prototype); // object 
 console.log(typeof studObj.__proto__); // object 
 console.log(Student.prototype === studObj.__proto__ ); // true 

正如上面例子看到, 函数通过 [[函数名称]].prototype 方法会见到原型工具. 可是, 工具(实例)并没有袒暴露 prototype 属性，而是行使 __proto__ 来会见它.

Object 工具的原型

前面说起到, 原型工具在工具中是不行见. 行使 Object.getPrototypeOf(obj) 要领来会见实例的原型工具. (这也是保举方法, __proto__ 并不是尺度属性, 在IE11以下其余赏识器中没有实现).

function Student() { 
 this.name = 'LeBron James'; 
 this.gender = 'M'; 
 } 
 var studObj = new Student(); 
 Student.prototype.sayHi= function(){ 
 alert("Hi"); 
 }; 
 var studObj1 = new Student(); 
 var proto = Object.getPrototypeOf(studObj1);  
 // returns Student's prototype object 
  
 alert(proto.constructor);  
 // returns Student function  

Object 原型工具包括如下 属性 和 要领

属性描写constructor返回建设该实例的结构函数__proto__指向建设该实例的结构函数的原型工具.要领描写hasOwnProperty()返回一个布尔值，指示工具是否包括指定的属性作为该工具的直接属性，而不是通过原型链担任。isPrototypeOf()返回一个布尔值，指示指定的工具是否位于挪用此要领的工具的原型链中。propertyIsEnumerable()返回一个布尔值，该布尔值指示指定的属性是否可列举。toLocaleString()返回当地名目标字符串.toString()返回工具字符串情势.valueOf()返回指定工具的原始值.

Chrome 和 Firfox 将工具的原型暗示为 __proto__, 而内部引用为 [[Prototype]]. IE不支持,只有IE11包括它.

修改原型

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!