对象 VS 函数
对象和函数的树都画完了,然后我们来分析一下对象和函数的区别。
- 对象:是一个容器,可以存放各种类型的实例(数据),包括函数。
- 构造函数:依据原型创建原型的实例。(个人理解可能有误)
- 一般函数:就是我们“随手”写的函数,执行某些代码,返回结果(也可以不返回)。
从 JavaScript 的语法角度来看,Object、Function、String、Date、Number等都是function,而Object.prototype、String.prototype、Date.prototype、Number.prototype等才是对象。
这和我们经常用到表述方式有点不一样,也正是这个原因,导致理解和表达的时候非常混乱。
我们还是来验证一下:
- 函数
对象
对象的验证.png
这里有一个特例,Function.prototype 是一个函数,而且是所有函数的源头。
所以说,从 JavaScript 的语法角度来看,函数就是函数,对象就是对象,不存在Object既是对象又是函数的情况。
那么到底是什么关系呢?我们定义一套函数来具体分析一下。
实战:用ES6的class定义一套对象/函数
ES6提供了class,但是这个并不是类,而是 Function 的语法糖。目的是简化ES5里面,为了实现继承而采用的各种“神操作”。
用class来定义,结构和关系会非常清晰,再也不会看着头疼了,建议新手可以跳过ES5的实现方式,直接用ES6的方式。
我们先定义一个Base,然后定义一个Person继承Base,再定义一个Man继承Person。也就是说,可以深层继承。
class Base { constructor (title) { this.title = '测试一下基类:' + title } baseFun1(info) { console.log('\n这是base的函数一,参数:', info, '\nthis:', this) } } class Person extends Base{ constructor (title, age) { super(title) this.title = '人类:' + title this.age = age } personFun1(info) { console.log('\n这是base的函数一,参数:', info, '\nthis:', this) } } class Man extends Person { constructor (title, age, date) { super(title, age) this.title = '男人:' + title this.birthday = date } manFun3 (msg) { console.log('jim 的 this ===', this, msg) } }
我们打印来看看结构:
实例的结构.png
- 构造函数 constructor
打印结果很清晰的表达了,构造函数就是我们定义的class。 - 属性
属性比较简单,统统都挂在 this 上面,而且是同一个级别。 - 函数
函数就有点复杂了,首先函数是分级别的,挂在每一级的原型上面。Base的函数(baseFun1),挂在Base的原型上面,_ _ proto__ 指向原型。Person的函数(PersonFun1),应该挂在Person的原型上面,但是打印结果似乎是,Base好像标错了位置。 - 原型链
Man的实例 > Man的原型 > Person的原型 > Base 的原型 > Object 的原型。通过 _ _ proto__ 连接了起来。
Man的实例 man1,可以通过这个“链条”,找到 baseFun1,直接用即可(man1.baseFun1()
✔), 而不需要使用_ _ proto__(man1.__ proto__.__ proto__.__ proto__.baseFun1()
✘)
这个和面对对象的继承是一样的效果。
prototype VS _ _ proto _ _
看上面两个大树,既有 prototype 又有 _ _ proto _ _,好乱的样子。那么怎么办呢?我们可以找一下规律:
- prototype:prototype 是自己的原型,可以其原型可以是函数,也可以是对象。有各自的继承体系。
- __ proto __ :__ proto __ 指向上一级原型,并不是自己的,只是一个指针,方便使用父级的方法和属性。可以指向对象,也可以指向函数。
原型和原型链
组合 VS 继承
一提到面向对象,大家一般都会想到封装、继承、和多态。但是 JavaScript 却不是这个思路。上面那颗大树看起来是继承的关系,Object.prototype 是基类,派生出来 Object.prototype、Function.prototype、string.prototype等。
但是其实这里面隐藏了组合的方式。
我们展开Object 来看看,就会发现自己进入了一个迷宫
object
object 的“特殊”的结构
看上面的图我们会发现,Object 并不像我们想象的那么简单,有很多的方法,我们随便找几个点开看看:
object展开三个函数
每一个函数都有自己的原型链(__ proto__),是不是有一种进入迷宫的感觉?我当初看的到时候就被吓退了,这都是个啥?
但是我们换个思路来理解,就清晰多了,那就是:组合代替继承!
Object 其实是由若干个函数组合而成。
其实,想一想,JavaScript 没有私有成员,所以各种细节都暴露出来了,所以我们可以看到原型,看到原型链,看到构造函数。
正是因为看到了这么多的细节,而以前又没有一个比较好的封装方式,所以看起来就特别的乱,理解起来也特别头疼。
总结
按照 JavaScript 的语法来总结,否则总感觉说不清楚。
- 对象(xxx.prototype)
- 对象的“根”是 Object.prototype,其上一级是null。
- 对象只有_ _ proto__,指向上一级原型。
- 对象没有 prototype,因为Object.prototype、String.prototype、Number.prototype等本身就是对象。通过 _ _ proto__寻找上一级原型。
- 函数
- 函数的“根”是 Function.prototype,其上一级是 Object.prototype。
- 函数有prototype,(JavaScript 语法角度)Object、String、Function、Number 等都是函数,同时也是其原型的构造函数。
- 函数有_ _ proto__,指向上一级函数。
- 实例只有_ _ proto__ ,指向函数原型。
本文作者:自然框架
个人网址:jyk.cnblogs.com
声明:本文为 脚本之家专栏作者 投稿,未经允许请勿转载。