首页 > javascript中__proto__和prototype的区别

javascript中__proto__和prototype的区别

__proto__和prototype的区别,刚看到一句解释是这样的:

__proto__是站在对象的角度讨论原型对象。
prototype是站在构造函数的角度讨论原型属性,或构造函数创建的对象的原型对象。

仍然不是很理解,请大神帮展开来再说一下。所谓展开大概就是像知乎那样啰嗦的讲一下“我是谁,我从哪里来,我要到哪里去”3个问题。
或者换个说法,就是讲一个东西的时候,一般从3个维度来讲,
1、这个东西是什么?
2、这个东西有什么用?
3、这个东西怎么用?
如果不讲清楚这3个问题,就理解不了,因为我比较傻。谢谢。

另外有个具体的问题是:
最后一句“构造函数创建的对象的原型对象”,意思是当new一个对象的时候,这个new出来的对象是由构造函数创建的?


给你看三张图片:

javascript是基于对象的,换一种说法是基于原型(链)的。

每一个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法。prototype是通过调用构造函数来创建的那个对象的原型(属性)对象。

Javascript中对象的prototype属性,可以返回对象的 原型对象 的引用。

怎么理解原型(链)?
图1
函数(对象)有prototype属性->对应了一个原型对象->每个原型对象都有一个constructor属性->包含一个指向prototype属性所在函数的指针

每一个实例都有一个内部属性__proto__->指向原型对象

这里提到的几个属性或对象:
Person.prototype;//->原型对象
Person.prototype.constructor;//->指向构造函数

p.__proto__;//->指向原型对象


_proto_在es5里指向构造函数的prototype,在es6里指向该构造函数。看它的__就知道他是个私有属性了,不建议使用。
比如`复制代码
function A(){

console.log(this.__proto__.aa);//1 
this.aa=2

}
A.prototype={

aa:1

}
var a=new A;
console.log(a.aa);//2
a.__proto__={

aa:3

}
delete a.aa;//删除特权属性
console.log(a.aa);//3`
在不操作a.__proto__的时候,a.aa会是2。
prototype就是原型了。主要用于继承,比如你在Function.prototype定义一个函数,所有函数都有这个方法。
这有一篇js继承相关的文章:闲聊js继承


其实没有那么复杂,你只是被一些概念性的东西弄迷糊了。
所谓的构造函数就只是一个普普通通的函数,只是它实现的功能就是为了new 一个object

例如:

function Person(name,age){  //一般构造函数的首字母大写,这是规范
    this.name=name;
    this.age=age;
}
Person.prototype={    //给Person的原型上添加方法
    a:function(){
        alert(this.name);   
    }
}
var obj=new Person('张三','20');   //obj就是构造函数Person的实例对象
console.log(obj.name)  //张三
console.log('obj.age') // 20
obj.a();  //alert 出张三     

String.prototype.test = function(){
   console.log("test from String");
};
var testStr = new String();
testStr.test();// test from String
testStr.__proto__ === String.prototype; //true

函数对象都会有个prototype属性,这个其实就是函数对象的一个实例。而每一个对象(如testStr)的__proto__属性均指向这个prototype。就像上面的例子,给String扩展了一个test方法。

【热门文章】
【热门文章】