`
icekiller110
  • 浏览: 69315 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS的prototype和__proto__

    博客分类:
  • JS
js 
阅读更多
终于弄明白了__proto__ 和 prototype。
阅读此文还有一个前提就是要很明确JS中new Function()的含义,不清楚的可以参考:http://rockyuse.iteye.com/blog/1426510

__proto__是JS内部使用寻找原型链的属性。
prototype是显示修改对象的原型的属性。

这两句很重要,以下我会详细说明,此文章就是为了说明上面的两句话的含义。

var Programmer = function(){};  
Programmer.prototype.WriteCode = function() {
    return "programmer writes code";
};
Programmer.prototype.Salary = 50000;
var p = new Programmer();


我们来看一下p, p是一个引用指向programmer对象。我们给programmer对象的prototype定义了一个属性Salary和一个方法WriteCode();
显然我们直接定义了Programmer.prototype属性和方法。
当我们执行p.Salary的时候,会先从p的this范围内查找,没有找到这时候会沿着原型链向上追溯,可是具体怎么向上的呢,那么就是使用了programmer.__proto__来找到programmer的prototype。我再强调一遍__proto__是JS内部自己用来追溯用的,虽然FF把它的给暴露出来了,但是我们不能依赖于这个,浏览器各自的实现不一样,可见性不一样,甚至变量名称都不一样。

这样我们就很清楚了,我们使用prototype修改我们自定义类的原型的属性和方法。
JS内部使用__proto__来追溯自己的原型。

再来看一个例子:
var Person = function(){};
Person.prototype.ask = function(){
    return "haha............";
}
Person.prototype.Say = function() {
    return "Person say";
}
Person.prototype.Salary = 50000;

var Programmer = function(){};
Programmer.prototype.WriteCode = function() {
    return "programmer writes code";
};
Programmer.prototype.Salary = 500;
Programmer.prototype = new Person();
var p = new Programmer();


执行p.WriteCode(), 会是什么结果? //programmer writes code
NO, 应该是" ... has no method 'WriteCode' "

虽然我们定义了programmer.prototype.WriteCode, 但是在15行我们将programmer.prototype 设置为 Person了。person及它的prototype都没有WriteCode方法,所以“has no method 'WriteCode' ”。

使用这种方式便实现了JS的继承。
第二个例子是一种错误的用法,希望引起大家的注意。
分享到:
评论

相关推荐

    prototype,__proto,constructor

    分析javascript中 prototype __proto__ constructor之间的关系

    js prototype和__proto__的关系是什么

    主要介绍了js prototype和__proto__的关系是什么,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    浅谈javascript中的prototype和__proto__的理解

    在工作中有时候会看到prototype和__proto__这两个属性,对这两个属性我一直比较蒙圈,但是我通过查阅相关资料,决定做一下总结加深自己的理解,写得不对的地方还请各位大神指出。 跟__proto__属性相关的两个方法 ...

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

    主要介绍了详解帮你彻底搞懂JS中的prototype、__proto__与constructor(图解),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

    本文实例讲述了JS原型prototype和__proto__用法。分享给大家供大家参考,具体如下: 先来看一个实例 function Foo() { } var foo = new Foo(); console.log(foo.prototype);// undefined console.log(foo.__proto__...

    prototype与__proto__区别详细介绍

    主要介绍了prototype与__proto__区别详细介绍的相关资料,需要的朋友可以参考下

    Javascript中prototype与__proto__的关系详解

    主要给大家介绍了关于Javascript中prototype与__proto__的关系的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

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

    作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点,__proto__...

    javascript 中__proto__和prototype详解

    __proto__是内部原型,prototype是构造器原型(构造器其实就是函数) 构造器的原型(prototype)是一个对象 那什么是构造器呢? 要想创建一个对象,首先要有一个对象构造器,就像php里面一样,要想创建一个对象,...

    TsangTszKin#HexoBlog#prototype、__proto__与constructor1

    它的作用就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(可以理解为父对象)里找,如果父对象也不存

    跟我学习javascript的prototype,getPrototypeOf和__proto__

    一、深入理解prototype, getPrototypeOf和_ proto _ prototype,getPropertyOf和 _ proto _ 是三个用来访问prototype的方法。它们的命名方式很类似因此很容易带来困惑。 它们的使用方式如下: C.prototype: 一般...

    JavaScript中__proto__与prototype的关系深入理解

    这里讨论下对象的内部原型(__proto__)和构造器的原型(prototype)的关系。 一、所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 代码如下: Number.__proto__ === Function....

    简单解析JavaScript中的__proto__属性

    主要介绍了JavaScript中的__proto__属性,对于JavaScript中所谓的对象来讲,它指向对象的原型prototype,需要的朋友可以参考下

    JS中的原型以及prototype、constructor、__proto__三者之间的关系

    1、任何一个函数内都有prototype属性,这个prototype属性指向另一个对象 ,这个对象就是就是原型对象 ,简称原型。注意这个prototype是函数本身所自带的属性 2、原型的作用就是实现方法共享,将多个对象会调用的相同...

Global site tag (gtag.js) - Google Analytics