`
乱蓬头199303
  • 浏览: 80491 次
文章分类
社区版块
存档分类
最新评论

Js中Prototype、__proto__、Constructor、Object、Function关系介绍总结

阅读更多
摘要: 1.js的对象都拥有内部属性 [[prototype]] 指向其原型对象。[[prototype]] 被称为原型属性。 2 内部属性不可以直接访问.error: obj[[prototype]],但是可以间接访问 [[prototype]]

Prototype
1 js的对象都拥有内部属性 [[prototype]] 指向其原型对象。[[prototype]] 被称为原型属性。

2 内部属性不可以直接访问.error: obj[[prototype]],但是可以间接访问 [[prototype]]

a ECMA:标准对象原型访问器Object.getPrototype(object)(到目前为止只有Firefox和chrome实现了此访问器);

b 非标准访问器:__proto__(除了IE)

c obj.constructor.prototype

js的一切皆是对象,所以 函数也是对象.又因为对象拥有内部属性 [[prototype]],所以
函数也拥有内部属性 [[prototype]].

其次:函数同时拥有属性 prototype.prototype属性和 [[prototype]]并非同一个属性。

prototype属性指向一个对象,称为原型对象。所以:一个函数的原型属性(function’s prototype property ) 和函数实际的原型(prototype)没有关系

原型对象的作用:当函数fn被用作构造函数时,其所创建的所有实例的内部属性 [[prototype]] 指向 fn 的 prototype属性。

原型的作用:

1 构建原型链

当对象调用某个方法时,如果其本身不存在此方法,就会往其原型中寻找,直到原型链的顶端

原型链的作用:多个实例都需要的方法可以被抽出放到原型中,从而只需要定义一次,实现多个对象共享方法

Constructor
JS的所有对象都拥有constructor属性,指向其构造函数。函数的原型对象也是对象,所以原型对象也拥有constructor属性。并且JS定下了规则:

fn.prototype.constructor == fn;
即: 函数的prototype属性的constructor字段,指向当前prototype属性的拥有者,也就是构造函数本身

由 fn.prototype.constructor == fn;推导出来的结论:构造函数的实例的 constructor属性 指向其构造函数

推导:

var a = new fn();
首先在a本身寻找:没有找到 constructor属性.再往原型链向上查找,找到a的原型,也就是 fn.prototype,发现了 constructor属性。所以就相当于 构造函数的实例的 constructor属性始终指向其构造函数

Prototype、__proto__与Object、Function关系介绍
Function、Object:Js自带的函数对象

prototype,每一个函数对象都有一个显示的prototype属性,它代表了对象的原型(Function.prototype函数对象是个例外,没有prototype属性)

proto:每个对象都有一个名为__proto__的内部隐藏属性,指向于它所对应的原型对象(chrome、firefox中名称为__proto__,并且可以被访问到)。原型链正是基于__proto__才得以形成(note:不是基于函数对象的属性prototype)。

关于上面提到的函数对象,我们来看以下例子,来说明:

var o1 = {};
var o2 =new Object();
function f1(){}
var f2 = function(){}
var f3 = new Function('str','console.log(str)');
f3('aabb');   // aabb
console.log('typeof Object:'+typeof Object);            //function
console.log('typeof Function:'+typeof Function);        //function
console.log('typeof o1:'+typeof o1);   //object
console.log('typeof o2:'+typeof o2);   //object
console.log('typeof f1:'+typeof f1);   //function
console.log('typeof f2:'+typeof f2);   //function
console.log('typeof f3:'+typeof f3);   //function
通常我们认为o1、o2是对象,即普通对象;f1、f2、f3为函数。但是其实函数也是对象,是由Function构造的,f3这种写法就跟对象的创建写法一样。f1、f2最终也都像f3一样是有Function这个函数构造出来的
f1、f2、f3为函数对象,Function跟Object本身也是函数对象

Js中每个对象(null除外)都和另一个对象相关联,通过以下例子跟内存效果图来分析Function、Object、Prototype、__proto__对象间的关系
http://click.aliyun.com/m/23740/
分享到:
评论

相关推荐

    详解帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    JavaScript中的`prototype`、`__proto__`和`constructor`是理解JavaScript面向对象编程的关键概念。这篇文章通过图解的方式深入浅出地解析了这三个概念之间的关系。 首先,`__proto__`属性是对象独有的,它指向对象...

    js prototype和__proto__的关系是什么

    下面将详细介绍这两者之间的关系以及它们在JavaScript对象继承中所扮演的角色。 首先,prototype属性是函数所独有的。在JavaScript中,函数是一种特殊的对象,可以作为构造函数来创建实例。每一个函数都有一个...

    JS原型prototype和__proto__用法实例分析

    JavaScript中的原型(Prototype)机制是实现继承的一种方式,它涉及到两个关键的概念:`prototype`和`__proto__`。这两个属性在JavaScript的对象和函数中扮演着不同的角色。 首先,`prototype`属性主要用于函数对象...

    javascript 中__proto__和prototype详解

    总结一下,__proto__属性与prototype属性是JavaScript原型继承中的两个关键点,它们共同支撑起JavaScript的原型链继承机制。通过__proto__属性,我们可以追踪到对象的原型链,而通过prototype属性,函数可以将其属性...

    prototype与__proto__区别详细介绍

    Each constructor is a function that has a property named “prototype” that is used to implement prototype-based inheritance and shared properties. Every object created by a constructor has an ...

    【JavaScript源代码】五句话帮你轻松搞定js原型链.docx

    在JavaScript中,每个对象都有一个内部属性`[[proto]]`,这个属性通常通过`__proto__`访问,它指向创建该对象的函数的`prototype`属性。原型链的主要作用是使得一个对象能够通过其构造函数的原型链访问到其构造函数...

    了解JavaScript中的prototype (实例)

    JavaScript中的`prototype`是理解面向...总结,`prototype`在JavaScript中起着核心作用,它是实现面向对象编程的重要一环。理解`prototype`以及相关的原型链、继承和对象创建方式,对于深入学习JavaScript至关重要。

    JavaScript的prototype

    JavaScript中的`prototype`是一个核心概念,它涉及到对象继承和函数原型。在JavaScript中,每创建一个函数,该函数就会自动获得一个名为`prototype`的属性,这个属性是一个对象,用于实现对象间的继承。同时,每个...

    图解prototype、proto和constructor的三角关系

    在JavaScript中,prototype、proto(或__proto__)和constructor是理解对象继承和构造函数之间关系的关键概念。首先,我们来看它们之间的三角关系。 **构造函数(Constructor)** 构造函数是一种特殊的函数,用于...

    javascript Object与Function使用.docx

    然而,在深入学习JavaScript的过程中,不少开发者对于语言内部的一些概念仍感困惑,比如Object与Function之间的关系及其如何影响`instanceof`运算符的结果。 #### 二、JavaScript对象体系结构概述 在JavaScript...

    简单解析JavaScript中的__proto__属性

    JavaScript会查找其`__proto__`指向的原型对象,如果在原型对象中仍然找不到,就会继续查找原型对象的`__proto__`,这个过程会持续到找到属性或者查找到最顶层的原型对象——`Object.prototype`为止,如果`Object....

    JavaScript中的prototype(原型)属性研究

    JavaScript中的...总结,JavaScript中的prototype属性是实现面向对象编程的重要组成部分,它涉及到继承、方法共享以及原型链等核心概念。理解并熟练运用这些知识,能够帮助开发者构建更复杂、更高效的应用程序。

    JavaScript中prototype的使用

    JavaScript中的`prototype`属性是实现面向对象编程的关键概念之一,尤其在JavaScript中,它用于实现对象的继承。本文将深入探讨`prototype`的含义、作用以及如何使用。 1. **什么是prototype** 在JavaScript中,每...

    js遍历属性 以及 js prototype 和继承

    在JavaScript中,遍历属性、理解`prototype`和掌握继承机制是编程中不可或缺的基本技能。本文将深入探讨这些概念,并通过实例来加深理解。 首先,让我们来看如何遍历JavaScript对象的属性。JavaScript提供了多种...

    prototype学习

    在现代浏览器和Node.js环境中,`__proto__`属性已经被废弃,推荐使用`Object.getPrototypeOf`或`Object.setPrototypeOf`进行操作。 ### 五、`prototype`上的方法 `prototype`上常见的方法包括`hasOwnProperty()`...

    javascript中类和继承(代码示例+prototype.js)

    本文将深入探讨JavaScript中的类和继承,并结合`prototype.js`文件中的示例进行解析。 ### 类的概念与模拟 在JavaScript中,我们通常使用函数来模拟类的行为。一个函数可以看作是一个类的定义,通过`new`关键字来...

    prototype小例子

    总结一下,`prototype`在JavaScript中扮演着关键的角色,它是实现面向对象编程和继承的核心机制。通过理解和熟练使用`prototype`,我们可以创建出更加复杂且可复用的代码结构。同时,了解`__proto__`、`constructor`...

    prototype_pullotion

    JavaScript中的每个对象都有一个内置的`__proto__`属性,它链接到一个所谓的原型对象(prototype object)。当尝试访问对象的一个属性时,如果该属性在当前对象中不存在,JavaScript会查找`__proto__`链,如果在原型...

    图文详解JavaScript的原型对象及原型链

    总结一下,理解JavaScript的原型对象和原型链,关键在于把握`prototype`和`__proto__`的关系以及它们在对象继承中的作用。通过清晰地描绘出原型链,可以帮助我们更好地掌握JavaScript的继承机制,并解决实际编程中的...

Global site tag (gtag.js) - Google Analytics