前言
之前很多讲原型的文章都会有箭头图,看的我是头晕脑胀的,这次我希望能通过简单的文字,让大家都能彻底彻底理解原型和原型链,都知道虽然JavaScript和Java名字类似,但是两种完全没有联系。其中就包括Java中很重要的类,在JavaScript中是没有类的概念的,为了复用JavaScript使用了原型和原型链的形式实现了继承。后续ES6推出了class的语法糖,但本质上是对象,可以称之为伪类。伪类是仿照基于类的语言,通过构造器函数产生对象。所以今天的故事我们就从构造函数开始讲起。
构造函数
什么是构造函数
构造函数和普通函数的区别除了人为规定的命名首字母大写之外,最核心的区别在于有没有使用new操作符
function Person (name,age){
this.name = name
this.age = age
}
上面的函数仅仅是一个普通的函数只有当这个函数被用于new 对象的时候才能被称为构造函数。
那么为什么通过new操作符可以生产对象呢?在new的操作中又经历了什么呢?
1.在构造函数头部隐式的创建一个对象
2.将构造函数的作用域赋给新对象,将原先指向window的this指向构造出的新对象
3.返回这个对象(如果函数体内含有return,则分返回函数是否是对象)
function Person (name,age){
this.name = name
this.age = age
return 1
}
new Person('tim',18) // Person {name: "tim", age: 18}
如果是return非对象则返回构造的对象
function Person (name,age){
this.name = name
this.age = age
return {tim:18}
}
new Person('tim',18) // {tim:18}
如果是return对象则返回return的对象
构造函数的作用
我们开头提到过所谓类就是用来描述事物中的属性和行为的,类的特征是由成员组成的,而属性对应的就是类中的成员变量,而方法对应的就是类中的成员方法。而我们通过构造函数构造出来的对象就能满足这一个要求。
function Person (name,age){
this.name = name
this.age = age
this.eat = function (food){
console.log('今天吃了'+food)
}
}
var tim = new Person('tim',18)
var cope =new Person('cope',18)
当我们使用同一个构造函数,构造出来的对象,他们就会含有一些相同的属性和公用的方法,而这些所有实例都含有的属性和方法除了放在构造函数体内,我们也可以放在函数的原型上,方便实例继承。
原型
prototype
每一个JavaScript的函数对象上都有一个属性叫做prototype,翻译过来呢就是原型。
function Man (name,age){
this.name = name
this.age = age
}
Man.prototype.sex = 'male'
Man.prototype.needCompanion = true
var tim = new Man('tim',18)
var cope =new Man('cope',18)
console.log(tim.sex,cope.sex) //male male
上面的例子我们就完成了一次实例的继承,tim和cope都继承了来自原型上的属性sex
我们可以这样说,tim和cope的原型就是Man.prototype这个对象
那么这个对象里还有什么内容呢?我们在控制台打印一下这个对象
{
"sex": "male",
"needCompanion": true,
"constructor": ƒ Man(name,age),
"__proto__": Object
}
我们发现在控制台中除了sex和needCompanion这两个我们自己添加的属性,prototype还有两个属性,而且这两个属性,在控制台中的颜色还是偏淡的,代表了这两个都是隐式属性。
在了解了什么是prototype的基础上我们尝试去揭开constructor和__proto__的神秘面纱
constructor
constructor翻译过来就是构建者的意思,我们可以发现Man.prototype.constructor的指向就是Man这个构造函数。
由于JS中的对象其实都是指针,所有我们可以发现Man和Man.prototype.constructor其实就是完全相同的
console.log(Man === Man.prototype.constructor) //true
__proto__
这个属性是用来干什么呢?看下面的代码你就明白了
console.log(tim.__proto__ === Man.prototype) //true
实例的原型和构造函数可以通过constructor和prototype函数可以相互找到对方,那么实例怎么才能找到实例的原型呢,就是通过__proto__属性找到他的原型,和之前作用域中的提到[[scope]]其实差不多。
每个对象都有__proto__这个属性,还包括数字类型,布尔类型等
上面 我们提到的new操作符,在new的过程中,也会将生成的隐式对象的__proto__属性指向构造函数的原型,这样才是完整的实例化过程。 原型的内容差不多就这样了,内容不多理解一下就行
原型链
上文提到了除了null,undefiend等类型没有__proto__属性外,其他都有__proto__属性,这就和作用域链一样,是一个链式结构,直到找到头为止。
tim.__proto__ === Man.prototype
tim.__proto__.__proto__ === Object.prototype
tim.__proto__.__proto__.__proto__ === null
当访问实例上的属性时,会首先查找实例上是否含有该属性,而当这个对象上没有这个属性时就会访问__proto__索引看看上面有没有,如果还没有就继续沿着__proto__向上寻找,这就是原型链。
写在最后
这是这个系列的第五篇文章,咕咕咕挺久的了,每一次写文章都会有一些收获,希望接下来我可以做一只勤劳的鸽子。下篇文章打算讲讲this,下面的文章,我都会尽量找一些代表性的题目,这样学习之后都可以加以巩固,那么我们下次再见 了。