理解JavaScript原型链-js教程-PHP中文网

理解JavaScript原型链

高洛峰

发布： 2016-12-09 09:13:18

原创

1159人浏览过

每一个javascript对象都和另一个对象相关联，相关联的这个对象就是我们所说的“原型”。每一个对象都会从原型继承属性和方法。有一个特殊的对象没有原型，就是object。在之后的图示中会进行说明。

举个栗子，我们首先声明一个函数Student()：

function Student(name){
  this.name = name;
 this.hello = function(){
   alert(`Hello,${this.name}`);
 }
 }

登录后复制

酷纬企业网站管理系统源码

酷纬企业网站管理系统是酷纬信息开发的为企业网站提供一揽子解决方案的营销型网站系统，后台采用PHP+Mysql架构，内置企业简介模块、新闻模块、产品模块、图片模块、下载模块、在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准，通过模板或者定制为企业提供专业的营销型网站。

查看详情

这个函数包含一个属性name和一个方法hello。
在JavaScript中，可以通过new关键字来调用Student函数（不写new就是一个普通函数，写new就是一个构造函数），并且返回一个原型指向Student.prototype的对象，如下所示：

立即学习“Java免费学习笔记（深入）”；

var xiaoming = new Student("xiaoming");
alert(xiaoming.name); // xiaoming
xiaoming.hello(); // Hello,xiaoming

登录后复制

如果我们想确认一下我们的设想对不对，就会希望去比较一下xiaoming.prototype和Student.prototype是否相等。
但是xiaoming没有prototype属性，不过可以用__proto__来查看。接下来我们就用这些属性来查看xiaoming，Student，Object之间的原型链：

document.onreadystatechange = function(){
 // interactive表示文档已被解析，但浏览器还在加载其中链接的资源
 if(document.readyState === "interactive"){
  var xiaoming = new Student("xiaoming");
  alert(xiaoming.name);
  xiaoming.hello();
  console.log("xiaoming.__proto__：");
  console.log(xiaoming.__proto__);
  console.log("Student.prototype：");
  console.log(Student.prototype);
  console.log("xiaoming.__proto__ === Student.prototype：" + xiaoming.__proto__ === Student.prototype);
  console.log("Student.prototype.constructor：" + Student.prototype.constructor);
  console.log("Student.prototype.prototype：" + Student.prototype.prototype);
  console.log("Student.prototype.__proto__：");
  console.log(Student.prototype.__proto__);
  console.log(Object.prototype);
  console.log("Student.prototype.__proto__ === Object.prototype：" + Student.prototype.__proto__ === Object.prototype);
 }
}

登录后复制