原型及原型链,以及prototype和__proto__属性(笔记便于以后复习)

2023-08-02

首先,js的数据结构有 原始类型(5种):Boolean、Number、String、Null、Underfined,

然后是引用类型:Array、Date、Error、RegExp、Function、Object,注意这里,引用类型的返回值,其实只有2种,也就是Function和Object,用typeof就可以判断出。

js一切都是对象,Function自然也是对象,甚至Function比Object的功能更强大,new Function出来的变量,比如:

function Foo(){}
var foo = new Foo();
typeof Foo //function
typeof foo //object

Function和Object的区别,重点来了,Function有prototype属性,而Object是没有的:

console.log(Foo.prototype) //Object
console.log(foo.prototype) //undefined

下面来说原型链和继承:

  js是通过__proto__来明确继承 的关系,__proto__不同于prototype,因为__proto__是对象的属性,因此Function和Object都有这个属性,在强调一下,Object是没有prototype的,而Function和Object都有__proto__属性。

然后看一下__proto__这个属性是怎么工作的,例如:

var a = {aa:1};
var b = {bb:2};
var c = {cc:3};
a.__proto__ = b;
b.__proto__ = c; console.log(a.aa);//
console.log(a.bb);//
console.log(a.cc);//

这就简单的实现了继承,也就是原型以及原型链。既然__proto__解决了继承的问题,那么prototype干什么呢?当然有它自己的用处,再回到上一个例子:

function Foo(){}
var foo = new Foo();
console.log(Foo.prototype===foo.__proto__)//true

精髓就在于此:通过new构造函数构造出来的实例对象foo,它的__proto__属性,其实是一个指针,它指向的是构造函数Foo的prototype属性。

为了便于以后复习,我总结一下上面内容,可能有理解不对的地方,希望大神指正。

1、object.__proto__指向他的原型对象,如果他的原型对象的__proto__还有上面的原型对象,比如:

var a = {aa:1};
var b = {bb:2};
var c = {cc:3};
a.__proto__ = b;
b.__proto__ = c;

那么,a就继承了c的属性和方法,这就是原型和原型链,继承就是这样实现的。

2、关于prototype和__ptoto__:

首先,Function和Object都属于引用类型(平级的),都是对象,因此,都具有__proto__属性。

其次,Function有prototype属性而Object没有。

prototype和__ptoto__两者的关系是,实例对象的__proto__指向的就是构造函数的prototype:

function Foo(){}
var foo = new Foo();
console.log(Foo.prototype===foo.__proto__)//true

原型及原型链,以及prototype和__proto__属性(笔记便于以后复习)的相关教程结束。