`
Mossad
  • 浏览: 82169 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

有趣的JavaScript原型链

阅读更多

原文地址:http://www.mollypages.org/misc/js.mp 

几个有意思的知识点:

  • 所有的实例对象都继承了创建它们的构造函数的原型对象。
  • Mozilla/Konqueror浏览器实现了一个特殊的__proto__属性来指向构造函数(用来创建属于该原型对象类型的实例对象的函数)的原型对象。
  • 别去纠结有没有这么一个小小的__proto__属性,我们的思路就是要所有的实例对象能够使用它们的构造函数所指向的原型对象。这个属性是prototype,它是JavaScript标准的一部分。prototype对象默认都有一个constructor属性反向指向了以该prototype对象作为原型的构造函数。
  • prototype对象只为构造函数创建出来的实例对象继承属性所用,构造函数自己却并不使用它(但既然该构造函数自己也是一个对象,那么它也会继承它的构造函数的原型,一般是javascript系统的Function对象)。
function Foo() { } ; 
var f1 = new Foo();

Foo.prototype.x = "hello";
f1.x   //=> hello
Foo.x //=> undefined
注意,我们使用Foo.prototype来为所有Foo函数创建出来的实例对象设置属性。我们没有使用f1.prototype来为f1设置属性,请记住,这一点非常的重要!

 

  • 默认的prototype对象可以被用户创建的对象替换掉。这样做的话,我们必须重复javascript运行时在幕后对默认的prototype对象所做的那样去手动设置constructor属性。
function foo() { } ; var f1 = new foo();
f1.constructor === foo.prototype.constructor === foo  
//replace the default prototype object
foo.prototype = new Object();
//now we have:
f1.constructor === foo.prototype.constructor === Object
//so now we say:
foo.prototype.constructor = foo
//all is well again
f1.constructor === foo.prototype.constructor === foo

 

  • 每一个的prototype对象自己都是由Object()函数(默认情况下)创建而来,所以prototype有它自己的原型那就是Object.prototype。因此无论什么类型的实例最终都会继承Object.prototype对象的属性。
  • 所有的对象会自动从原型链上读取属性,就好像这些属性就定义在这些对象中一样。
为对象设置属性会隐藏该对象的原型链上相同属性名的属性。
function foo() { } 
f1 = new foo();
f2 = new foo();
foo.prototype.x = "hello";

f1.x  => "hello"
f2.x  => "hello";

f1.x = "goodbye";   //setting f1.x hides foo.prototype.x

f1.x  => "goodbye"  //hides "hello" for f1 only
f2.x  => "hello"
  
delete f1.x
f1.x  => "hello";   //foo.prototype.x is visible again to f1.
直接改变prototype上的属性会影响所有的实例对象:
foo.prototype.x = "goodbye";
//now
f1.x  => "goodbye"
f2.x  => "goodbye";

 更多有趣的东西:

 沿着上图中的箭头走,你会发现javascript语言核心中的一些有趣的东西。(找个javascript console试试这些示例代码吧)

  • Function.__proto__指向Function.prototype。这使得:Function.constructor === Function,也就是说:Function是它自己的构造函数!
  • Object instanceof Object == true。这是因为:Object.__proto__.__proto__.constructor == Object。注意,跟Object instanceof Object不一样的是Foo instanceof Foo == false,这是因为:Foo并没有作为它原型链上的某个构造函数。
  • Function.prototype.toString是一个内置的函数,它有别于另外一个内置的函数:Object.prototype.toString
f1.toString() finds:
Object.prototype.toString

We get something like: [object ...]
 然而:
Foo.toString() first finds & uses:
Function.prototype.toString()
  
We get something like: [Function foo...]
 如果我们这样做:
delete Function.prototype.toString
Foo.toString()
  
We get something like: [object ...]
===========翻译不当之处敬请指正,在此先行谢过!===========

 

  • 大小: 176.5 KB
分享到:
评论

相关推荐

    跟我学习javascript的prototype原型和原型链

    在JavaScript编程语言中,prototype原型和原型链是理解其面向对象特性的核心概念。JavaScript是一种基于原型的语言,它与传统的面向对象语言(如Java或C#)不同,后者是基于类的继承模型。而JavaScript使用原型链来...

    head first JavaScript源码

    原型链是JavaScript实现继承的关键机制,它允许一个对象访问另一个对象的属性和方法。 事件处理和DOM操作也是JavaScript在网页交互中的关键部分。通过监听和触发事件,JavaScript可以响应用户的操作,如点击按钮、...

    head first javascript 中文版.pdf

    你可以创建自定义对象,并利用原型链来实现继承。ES6引入了类的概念,但它们本质上仍然是基于原型的。 异步编程是JavaScript的重要特性,常见的有回调函数、Promise和async/await。这些机制可以帮助开发者处理耗时...

    javascript100个小例子

    8. **原型链**:JavaScript中的继承基于原型链机制,理解Object.prototype、__proto__和构造函数的关系。 9. **ES6新特性**:如类(class)、箭头函数、模板字符串、解构赋值、Promise、async/await等,这些都是...

    基于JavaScript实现继承机制之原型链(prototype chaining)的详解

    我们知道在JavaScript中定义类的原型方式,而原型链扩展了这种方式,以一种有趣的方式实现继承机制。prototype 对象是个模板,要实例化的对象都以这个模板为基础。总而言之,prototype 对象的任何属性和方法都被传递...

    深入浅出Javascript压缩包3

    2. **对象与原型链**:JavaScript的对象是基于原型的,理解对象的属性、方法、构造函数以及原型链的工作原理,对于编写可维护的代码至关重要。这部分将涉及到`this`关键字、对象字面量、原型对象(`__proto__`)以及...

    精通JavaScript源代码

    要精通JavaScript源代码,我们需要深入理解其核心概念,包括变量、数据类型、作用域、函数、闭包、原型链以及面向对象编程。 首先,JavaScript中的变量通过`var`、`let`或`const`关键字声明,具有动态类型,意味着...

    JS原型学习

    JavaScript中的原型链机制是这样的:当试图访问一个对象的属性或方法时,JavaScript首先会在该对象本身查找,如果没有找到,就会去其`prototype`对象中查找,再没有就继续查找`prototype`的`prototype`,这个过程会...

    javascript大全(包含教程、javascript特效以及技术讲座)

    教程部分可能涵盖了从基础到高级的JavaScript概念,例如变量、数据类型、控制结构(如if语句和循环)、函数、对象和原型链、闭包、异步编程(回调函数、Promise、async/await),以及ES6及更高版本的新特性,如箭头...

    JAVASCRIPT资料

    6. **原型与原型链**:JavaScript的对象可以通过原型互相继承,理解原型和原型链对于深入掌握对象机制至关重要。 7. **模块化**:随着代码量增加,模块化成为必需。CommonJS和ES6的import/export提供了模块化的解决...

    javascript脚本技术课件

    7. **原型和继承**:JavaScript使用原型链机制实现对象的继承,原型对象(prototype)可以扩展对象的功能。ES6引入了类(class)和继承的新语法,但底层仍然是基于原型实现的。 8. **函数式编程**:JavaScript支持...

    JavaScript学习资料大全.rar

    同时,JavaScript也支持面向对象编程,通过构造函数和原型链,可以创建和继承复杂的对象。 学习JavaScript,还需要熟悉ES6(ECMAScript 2015)及以后的新特性,比如模板字符串、解构赋值、let和const、类和模块等,...

    一个有趣而棘手的JavaScript示例列表.zip

    通过原型链,子对象可以访问父对象的属性和方法。 ```javascript function Animal(name) { this.name = name; } Animal.prototype.sayName = function() { console.log(this.name); } function Dog(name, breed...

    JavaScript 美术馆

    对象和原型链是JavaScript面向对象编程的基础。美术馆中的每个艺术作品都可能是一个对象,包含相关的属性和方法。原型链则使得对象可以继承其他对象的属性和方法,实现代码复用。通过理解原型和`__proto__`,你可以...

    JavaScript王者归来PDF本下载.txt

    如果试图访问对象的一个不存在的属性,则JavaScript引擎会沿着原型链查找该属性。 - **闭包(Closure)**:闭包是指有权访问另一函数作用域中的变量的函数。创建闭包最常见的方法就是在一个函数内部创建另一个函数,并...

    有趣的JavaScript玩具问题___下载.zip

    5. **对象和原型**:理解JavaScript中的对象和原型链,学习如何创建和操作对象,以及原型继承。 6. **函数式编程**:可能包含一些函数式编程的概念,如高阶函数、柯里化、纯函数等。 7. **异步编程**:了解回调...

    Head First Javascript Programming(英文版).pdf

    读者将学会如何创建和使用对象,理解原型和原型链,以及如何利用构造函数和类来实现面向对象的设计。此外,ES6引入的类语法也会被介绍,使得对象创建更加简洁。 事件驱动编程是JavaScript在Web开发中的重要应用,书...

    javascript

    3. **原型继承**:JavaScript使用原型链实现对象的继承,对象之间可以通过原型链共享属性和方法。 4. **异步编程**:JavaScript提供了事件循环和回调函数、Promise以及现在的async/await语法来处理异步操作,避免了...

    javascript入门学习笔记

    对象则是一种数据结构,可以存储键值对,它们之间可以通过原型链实现继承。理解闭包和作用域对于掌握JavaScript的高级特性至关重要。 三、DOM操作 在Web开发中,JavaScript常用于操作文档对象模型(DOM),通过DOM...

Global site tag (gtag.js) - Google Analytics