加入收藏 | 设为首页 | 会员中心 | 我要投稿 济宁站长网 (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

如上所述, 每个对象都能链接到函数的原型对象. 如果您更改了函数的原型, 则只有新对象将链接到更改后的原型. 所有其他现有对象仍然链接到旧的函数原型. 下面实例来演示这个场景:

  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 = ' + studObj1.age); // 15 
  8.  var studObj2 = new Student(); 
  9.  alert('studObj2.age = ' + studObj2.age); // 15 
  10.  Student.prototype = { age : 20 }; 
  11.  var studObj3 = new Student(); 
  12.  alert('studObj3.age = ' + studObj3.age); // 20 
  13.  alert('studObj1.age = ' + studObj1.age); // 15 
  14.  alert('studObj2.age = ' + studObj2.age); // 15 

使用原型

原型对象被JavaScript引擎用来做两件事:

查找对象的属性和方法在JavaScript中实现继承

  1. function Student() { 
  2.  this.name = 'LeBron James'; 
  3.  this.gender = 'M'; 
  4.  } 
  5.  Student.prototype.sayHi = function(){ 
  6.  alert("Hi"); 
  7.  }; 
  8.  var studObj = new Student(); 
  9.  studObj.toString(); 

在上面的示例, toString() 方法在 Student 中没有定义, 那么它是如何以及从哪里找到 toString() 的呢?

在这里,原型出现了. 首先, JavaScript 引擎检查 studObj 是否存在 toString 方法?. 如果没有找到,那么它使用 studObj 的 __proto__ 链接指向 Student函数 的 原型对象. 如果它仍然无法找到它那么它会在往上层并检查 Object 函数的原型对象,因为所有对象都是从 JavaScript 中的 Object 派生的,并查找 toString() 方法. 因此, 它在Object函数的原型对象中找到 toString()方法,因此我们可以调用 studObj.toString().

查找方式,如下图所示

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

上述就是原型基本知识点以及应用.

(编辑:济宁站长网)

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

热点阅读