java原型链_原型和原型链

前言

之前很多讲原型的文章都会有箭头图，看的我是头晕脑胀的，这次我希望能通过简单的文字，让大家都能彻底彻底理解原型和原型链，都知道虽然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，下面的文章，我都会尽量找一些代表性的题目，这样学习之后都可以加以巩固，那么我们下次再见 了。