Javascript 原型与原型链

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript 原型与原型链，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4604字，纯文字阅读大概需要7分钟。

内容图文

• 不是对象的“对象”
• 原型和原型链
• 总结
• 参考

不是对象的“对象”

JS中的数据类型可分为基本类型（包括数字、字符串、布尔等）和对象，这两者是有有本质差别的。你可能见过类似“JS中一切都是对象”的描述，但实际上这是不够严谨的。更合理的表述应该是“一切都可以被视作对象”（或者说表现的像个对象）。

var a = 1
 
// 视作对象使用
a.toString()
"1"
a.name = 'foo'
"foo"
 
// 如果是对象的话，a.name 应该是 foo，
// 但是实际是 undefined 属性赋值并未生效
a.name
undefined

透过上面的例子可以知道，简单类型并非对象，其可以被视作对象使用的原因是，JS引擎在处理a.toString()时，在内部临时创建了一个与该类型匹配的临时对象或者说拷贝（如上例 a 是数字，那么在引擎内部会执行new Number(1)），然后把代码中对该简单的类型的操作“转移”到临时对象上，然后将执行结果返回并输出，有点类似代理的操作。

然而，这个临时对象是“一次性”的，所以先前的修改并不会生效（如上例中的 a.name = 'foo'，实际上是在临时对象上执行的，所以后续的 a.name 又是一个新的临时Number(1)，所以后面的a.name自然就是undefined了）。

原型和原型链

在获取对象的属性时，如果对象“自身”没有，就会到其原型上找（其原型是对象的__proto__属性，和其构造函数的prototype属性相等，实际上二者是指向同一对象的），如果原型也没有，就到原型的原型找，再没有就到原型的原型的原型找，以此类推。这条原型连着原型的“链”就是原型链。

// 定义一个构造函数 Man
function Man() {}
Man.prototype.name = '张三'
"张三"
 
// 使用 Man 构造一个对象，并为对象属性赋值
var stranger = new Man()
stranger.name = '李四'
stranger.name 
"李四"
 
// 删除已赋值属性后，实例已经没有 name 了
// 再次访问该属性则会沿着“链”搜寻原型的 name
delete stranger.name
stranger.name  // === Man.prototype.name === stranger.__proto__.name
"张三"
 
// 一点补充
stranger.__proto__.constructor === Man
true
 
Man.prototype.constructor === stranger.__proto__.constructor
true

因为原型本身也是对象，那么原型也有原型，沿着这条链就找到最原始的原型Object.prototype，而Object.prototype还是对象，按照先前的逻辑，那么它还有原型，不过Object.prototype.__proto__ === null，这条链到此为止了。

总结

// 内置
Object.prototype === {constructor: ..., toString: ..., valueOf: ..., ...}
Function.prototype === ? () { [native code] }
 
// “公式 1”
(对象).__proto__ === (该对象的构造函数).prototype
 
// “公式 2” Object.prototype.__proto__ 并没有指向 Object.prototype
// 而是等于 null，故原形链到此为止，Object.prototype 就是终极原型
Object.prototype.__proto__ === null
 
// “公式 3” 实际上是“公式 1”的补充
// Function.__proto__ 不等于 Object.prototype
// Function既是函数也是对象，实际上也是满足“公式 1”的
Function.__proto__ === Function.prototype
 
// 一些 可能错误 的推论
// 由公式 1 3 推导出
(任意函数).__proto__ === Function.prototype
(任意函数).__proto__.__proto__ === Object.prototype
(任意函数).prototype.prototype === (任意函数).__proto__.prototype === (任意函数).prototype .__proto__=== undefined
 
// 由公式 1 2 推导出
(任意非 Object 函数).prototype.__proto__ === Object.prototype
 
// 有意思的是
// (function fn(){}).__proto__.constructor === Function
// (function(){}).__proto__.contructor === Function.prototype.contructor !== Function
(任意非 Object.prototype 对象).__proto__.constructor === (该对象的构造函数)

一些例子，可以用来巩固原型和原型链知识

('1').__proto__ === String.prototype
({}).__proto__ === Object.prototype
(function(){}).__proto__ === Function.prototype
 
===========================================
 
String.__proto__ === Function.prototype
Object.__proto__ === Function.prototype
Function.__proto__ === Function.prototype
 
===========================================
 
String.__proto__.__proto__ === Object.prototype
Object.__proto__.__proto__ === Object.prototype
Function.__proto__.__proto__ === Object.prototype
 
===========================================
 
String.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null
Function.prototype.__proto__ === Object.prototype
 
===========================================
 
String.prototype.prototype === undefined
Object.prototype.prototype === undefined
Function.prototype.prototype === undefined
 
===========================================
 
('1').__proto__ === String.prototype
('1').__proto__.__proto__ === Object.prototype
('1').__proto__.__proto__.__proto__ === null
 
({}).__proto__.__proto__ === null
 
String.__proto__ === Function.prototype
String.__proto__.__proto__ === Object.prototype
String.__proto__.__proto__.__proto__ === null
 
===========================================
 
('').__proto__.constructor === String
(Object).__proto__.constructor === Function
({}).__proto__.constructor === Object
 
===========================================
 
(1).prototype === undefined

参考

js中为什么不能给基本类型的变量添加属性和方法？ - SegmentFault 思否
JavaScript深入之从原型到原型链 - SegmentFault 思否

标签：Javascript

内容总结

以上是互联网集市为您收集整理的Javascript 原型与原型链全部内容，希望文章能够帮你解决Javascript 原型与原型链所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端