前置
画原型图软件:gliff
一、prototype(原型)
在一切开始之前回顾一下类
、实例
、prototype
、__proto__
的关系
function Person(nick, age){
this.nick = nick;
this.age = age;//这里并不是函数的属性,而是定义的实例this,new个空对象后会对this(实质上也是对这个空对象)进行初始化,
//函数返回赋值给p1
}
Person.prototype.sayName = function(){
console.log(this.nick);
}//在函数中的prototype增加新的公共属性
var p1 = new Person();
p1.sayName(); //通过实例对象p1去调用
总结:
我们通过函数定义了类Person,类(函数)自动获得属性prototype
每个类的实例都会有一个内部属性proto,指向类的prototype属性
二、原型链
先看一个有趣的现象:
我们定义一个数组,调用其valueOf
方法
[1, 2, 3].valueOf(); // [1, 2, 3]
很奇怪的是我们在数组的类型Array中并不能找到valueOf
的定义,根据之前的理论那么极有可能定义在这个实例的proto(也就是函数(类)Array的prototype(原型))中用于实例共享方法,查看一下
一个有趣的现象是我们在Object实例的proto属性(也就是Object的prototype属性)中找到了找到了这个方法
那么我们可以知道一些现象,以下图来做解释:
- |新对象: 用字面量的方式写一个数组[1,2,3](数组实质也是一个对象),实际上是创建一个实例,即一个new Array(new 了一个对象),当然内部也会自动添加一个属性proto
- 函数: 而这个数组[1,2,3]就是函数Array创建的,proto指向函数Array内部中自动添加属性prototype。这个prototype里有很多方法,你只要:函数名.prototype 就会出现很多方法
- 基本对象的函数:由于任何类(函数)的prototype本质上都是个类(对象)Object的实例(生成的一个对象),所以prototype也和其它实例一样也有个proto内部属性,指向其类型Object的prototype。而此时,函数Array的prototype中的proto同样指向object.prototype。
此时,函数Array.prototype.proto=object.prototype
总结:
(1)查找思路(一个对象的寻址过程):
new的对象自身的proto——函数原型.proto——原型的原型。
层层向上查找,最后还没有就返回undefined
(2)【重点了解】原型链的指向:
new对象——类函数(函数的原型对象)——function函数(任何函数都是由function函数创建)——object函数(任何含有{key:value}的基本对象都是object函数创建)
(3)节选于若愚老师的方法(真的很有效哦反正我是会了)
几句话能解释一切关于原型方面的问题:
- 当 new 一个函数的时候会创建一个对象,『函数.prototype』 === 『被创建对象.proto』
- 一切函数都是由 Function 这个函数创建的,所以『Function.prototype === 被创建的函数.proto』
- 一切函数的原型对象都是由 Object 这个函数创建的,所以『Object.prototype === 一切函数.prototype.proto』
三、instanceof 对象类型判断
instanceof
操作符,专门用来判断对象,判断一个对象是不是某个类型的实例
1 instanceof Number; // false
[1, 2, 3] instanceof Array; //true
可以看到[1, 2, 3]
是类型Array的实例
[1, 2, 3] instanceof Object; //true
这个结果有些匪夷所思,怎么又是Array的实例,又是Object的实例,这不是乱套了?其实这个现象在日常生活中很常见其实,比如我们有两种类型:类人猿、动物
我们发现黑猩猩既是类人猿的物种(实例),也是动物类型(实例)
是不是悟出其中的门道了,类人猿是动物的一种,也就是说我们的两个类型之间有一种父子关系。这就是传说中的继承,JavaScript正是通过原型链实现继承机制的
另外:
不是对象的数据类型,可以通过new一个对象进行包装成为一个包装对象
如b=1,是无法调用任何属性的,因为1不是对象
那么new Number(1)就将一个数字包装成一个对象