最近比较空, 但是学无止境, 浪费时间就不对了, 于是乎开始对前端基础知识点进行扫盲, 收货还是很多, 比如之前对 proto 和 prototype 搞不清楚以至于到后面看到这 2 个词就没有看下去的动力, 这应该就是人对自己不熟悉的东西的畏惧感, 这次有时间好好的学习了一下原型, 这篇笔记是对自己的学习的一个总结, 有错误之处, 望指出, 谢谢
1.proto 是一个对象拥有的内置属性(请注意: prototype 是函数的内置属性, proto 是对象的内置属性), 是 JS 内部使用寻找原型链的属性, 任何变量都有这个属性(除了 null)
javascript 代码
可以看出不管是什么类型的变量都有 proto 这个属性, 虽然打印出来的 proto 都是不一样的, 这一点我们后面讨论有了这个属性后就像打架有了帮手, 自己打不过, 可以通过这个属性找帮手
2.prototype 是函数的一个属性(每个函数都有一个 prototype 属性), 这个属性是一个指针, 指向一个对象它是显示修改对象的原型的属性
javascript 代码
可以看出来只有第二个函数才有 prototype 这个函数, 其他的都是 undefined 所以说 prototype 这是函数特有的属性
3. 原型与构造函数
javascript 代码
这里先说一下 new 这个标识符的作用:
a. 新建一个对象 dangpang={}
- b.Man.call(dapang, name, age);
- c.dapang.proto = Man.prototype
可以看出来, 每次 new 一个新对象就会有一个新的{}, 所以改变 erpang 的 name 对 dapang 的 name 是没有影响的
然后打印了一个 dapang, 刚刚的 new 的作用就体现出来了可是 dapang 里面到底有哪些东西呢, 看下面
- (如果想验证自己对原型熟不熟悉的话可以不看浏览器, 能不能自己写出来这些嵌套的对象)
- Man = {
- name : 'aaa',
- age : 18,
- proto: {
- num : 1,
- say: function() {
- console.log(this.name)
- },
- proto: Object.prototype
- }
- };
1. 首先他是有 Man new 出来的 Man 这个构造函数里面的 2 个属性 dapang 一定是有的,
2. 然后还有一个 proto, 最开始就说过了每一个变量都有 proto 这个属性, 用来找帮手, dapang 也不例外, 而且 dapang 的 proto 属性指向的是 Man.prototype, 所以 dapang.proto 里面就有 Man 的原型对象上面的所有属性, 这里就是 num 以及一个函数 say
3. 然后就是 Man.prototype 这个也是一个对象 (不是 null) 所以这家伙也有帮手, 这家伙指向 Object.prototype, 难怪说 js 里面万物皆对象
所以说 js 里面的原型链就是由于有了 proto 属性以及 prototype 对象的循环指向才会形成一条链, 最终指向 null
4. 原型对我们的实际开发有什么用
编程最好的感觉就是学以致用, 就是学习了就能马上用起来, 让我们来看看原型对我们实际开发中的作用吧
a 写 js 插件:
比如一个轮播图, 如果你想写成面对对象版的就要用到 prototype 来模拟, 将这个插件的公共方法都放到 prototype 属性里面来, 会让你一个页面多次调用这个插件的时候只会有一份公共方法, 是不是能有效的减少内存开销呢可以看这篇 轮播
b. 让代码更优雅
比如
javascript 代码
用了原型链你可以这样写:
javascript 代码
用了原型链的好处有很多比如减少了全局变量, 让代码更有结构感
c. 通过重写原型的方式, 兼容各大浏览器
ES5 里面有一个方法是 bind(), 作用和 call()以及 apply()差不多都是为了改变调用方法的对象, 只不过 bind 函数会返回一个待执行的函数, 而 call 以及 apply 会直接执行看下面 2 个一样功能的代码
可以看出 bind 函数可以返回一个未执行的函数, 可是如果有些浏览器没有这个函数呢, 比如 IE8, 那么就需要我们自己来兼容他
javascript 代码
来源: http://www.qdfuns.com/article/15098/75a6b259496f02f518b2465134e6edcf.html