加入收藏 | 设为首页 | 会员中心 | 我要投稿 济宁站长网 (https://www.0537zz.cn/)- 行业智能、边缘计算、专有云、AI硬件、5G!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

这篇文章,让你了解 JavaScript 中的原型(基础篇-图文)

发布时间:2019-10-20 02:43:31 所属栏目:优化 来源:小白冲冲冲冲
导读:JavaScript是一门动态语言, 你可以在任何时候向对象上添加属性,如下 functionStudent(){ this.name='LeBronJames'; this.gender='Male'; } varstudObj1=newStudent(); studObj1.age=15; alert(studObj1.age);//15 varstudObj2=newStudent(); alert(studObj
副标题[/!--empirenews.page--]

 这篇文章,让你了解 JavaScript 中的原型(基础篇-图文)

JavaScript是一门动态语言, 你可以在任何时候向对象上添加属性,如下

  1. function Student() { 
  2.  this.name = 'LeBron James'; 
  3.  this.gender = 'Male'; 
  4.  } 
  5.  var studObj1 = new Student(); 
  6.  studObj1.age = 15; 
  7.  alert(studObj1.age); // 15 
  8.  var studObj2 = new Student(); 
  9.  alert(studObj2.age); // undefined 

正如上面的实例, age 属性附加在 studObj1 实例上. 然而 studObj2 实例没有这个属性, 因为 age 属性只在 studObj1 实例上定义了.

那么, 如果想在后期添加一个属性且能被所有的实例所共享, 该怎么办? 答案这就今天主角 Prototype.

Prototype 是一个对象, 默认情况下与JavaScript中的任何一个函数或对象有关, 只是唯一区别在于函数的prototype 属性是可访问和可修改的,而对象的prototype属性是不可见的.

默认情况下任何一个函数包含 Prototype 对象, 如下图:

这篇文章,让你了解 JavaScript 中的原型(基础篇-图文)

prototype 对象是一种特殊类型的可枚举对象, 可以将需要附加属添加到其上,这些属性将在其构造函数的所有实例之间共享。

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴。

因此, 把上面的示例中使用函数的 prototype 来添加属性,以便于所有对象中都可以访问到, 如下:

  1. function Student() { 
  2.  this.name = 'LeBron James'; 
  3.  this.gender = 'M'; 
  4.  } 
  5.  Student.prototype.age = 15; 
  6.  var studObj1 = new Student(); 
  7.  alert(studObj1.age); // 15 
  8.  var studObj2 = new Student(); 
  9.  alert(studObj2.age); // 15 

使用 字面量 或 通过 new关键字和构造函数 的方式创建的每一个对象都包含 __proto__ 属性, 该属性指向创建此对象的函数的 原型对象.

这篇文章,让你了解 JavaScript 中的原型(基础篇-图文)

你可以在谷歌和火狐开发者调试工具中查看该属性(__proto__) , 根据下面的示例:

  1. function Student() { 
  2.  this.name = 'LeBron James'; 
  3.  this.gender = 'M'; 
  4.  } 
  5.  var studObj = new Student(); 
  6.  console.log(Student.prototype); // object 
  7.  console.log(studObj.prototype); // undefined 
  8.  console.log(studObj.__proto__); // object 
  9.  console.log(typeof Student.prototype); // object 
  10.  console.log(typeof studObj.__proto__); // object 
  11.  console.log(Student.prototype === studObj.__proto__ ); // true 

正如上面例子看到, 函数通过 [[函数名称]].prototype 方式访问到原型对象. 但是, 对象(实例)并没有暴露出 prototype 属性,而是使用 __proto__ 来访问它.

Object 对象的原型

前面提及到, 原型对象在对象中是不可见. 使用 Object.getPrototypeOf(obj) 方法来访问实例的原型对象. (这也是推荐方式, __proto__ 并不是标准属性, 在IE11以下其它浏览器中没有实现).

  1. function Student() { 
  2.  this.name = 'LeBron James'; 
  3.  this.gender = 'M'; 
  4.  } 
  5.  var studObj = new Student(); 
  6.  Student.prototype.sayHi= function(){ 
  7.  alert("Hi"); 
  8.  }; 
  9.  var studObj1 = new Student(); 
  10.  var proto = Object.getPrototypeOf(studObj1);  
  11.  // returns Student's prototype object 
  12.   
  13.  alert(proto.constructor);  
  14.  // returns Student function  

Object 原型对象包含如下 属性 和 方法

属性描述constructor返回创建该实例的构造函数__proto__指向创建该实例的构造函数的原型对象.方法描述hasOwnProperty()返回一个布尔值,指示对象是否包含指定的属性作为该对象的直接属性,而不是通过原型链继承。isPrototypeOf()返回一个布尔值,指示指定的对象是否位于调用此方法的对象的原型链中。propertyIsEnumerable()返回一个布尔值,该布尔值指示指定的属性是否可枚举。toLocaleString()返回本地格式的字符串.toString()返回对象字符串形式.valueOf()返回指定对象的原始值.

Chrome 和 Firfox 将对象的原型表示为 __proto__, 而内部引用为 [[Prototype]]. IE不支持,只有IE11包含它.

修改原型

(编辑:济宁站长网)

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

热点阅读