原型
来源:互联网 发布:zepto.js左右滑动事件 编辑:程序博客网 时间:2024/04/27 18:35
原型是JavaScript接触到的第一个比较重要的概念,发现一个写的比较好的文章,总结一下
转自:https://segmentfault.com/a/1190000006639939
1 先弄懂什么是prototype以及_proto_
_proto_:任何一个对象Object都有_proto_,它是每一个对象的私有属性,是天生自带的。
prototype:不是任何对象都有prototype,只有构造函数有prototype,是后天赋予的。
2 原型链查找:
调用一个对象的属性或方法,一但这个对象中没有,就去这个对象的_proto_中查找。这个对象的_proto_指向自己构造函数的prototype属性
3 继承
纯原型链继承,借用构造函数继承,组合继承
#纯原型链继承
function Father() { this.likeFood= ['牛排','饺子','啤酒','可乐']}Father.prototype.saylikeFood = function () { console.log(this.likeFood); };function Son() {}Son.prototype = new Father();var zhangsan = new Son();zhangsan.likeFood.push('西瓜');zhangsan.saylikeFood(); // ["牛排", "饺子", "啤酒", "可乐", "西瓜"]
纯原型链的继承方式,其实说白了就是把继承的对象的prototype
等于继承自构造函数的实例。
但是这样的方式有问题。接着上面的代码的后面我们再写:
var lisi = new Son();lisi.saylikeFood(); // ["牛排", "饺子", "啤酒", "可乐", "西瓜"]
看出问题了吧,zhangsan直接修改了其构造函数的likeFood,
导致我们再实例的对象也收到了修改的影响,
因此这种继承方式有缺陷
#借用构造函数继承
function Father(name) { this.name = name; this.sayName = function () { console.log(this.name); }}function Son(name, age) { Father.call(this, name);//继使用call承了Father的属性 this.age = age;}var zhangsan = new Son('zhangsan', 17);
这种继承方式并没有利用到原型以及原型链的概念,它主要利用call的特性,call的第一个参数传入this,后面的参数传入函数所需的参数。
这种方式归根结底其实就是在实例一个对象的时候,向这个对象的上面添加所需的属性和方法。
但是其实这种方式也有问题,什么问题呢?
按照这种方式,每次new
一个对象,就是实例化一个对象,都会向这个对象身上添加一堆属性和方法。
添加属性是没问题的,但是每次在对象身上添加的方法,这个函数就要重写一次。
函数不能进行复用,这就是最大的问题!
#组合继承
function Father(name) { this.name = name;}Farther.prototype.sayName = function () { console.log(this.name);}function Son(name, age) { Farther.call(this, name); this.age = age;}Son.prototype = new Father();Son.constructor = Son;Son.prototype.sayage = function () { console.log(this.age);}var zhangsan = new Son();
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型
- 原型与原型链
- 原型 和 原型链
- 8种页面布局
- Mybatis generator中xml配置说明
- 使用tensorflow利用神经网络分类识别MNIST手写数字数据集
- shell文件对比
- ApplicationContextAware和ClassPathXmlApplicationContext(Spring定时任务运行多次问题)
- 原型
- 栈与队列的使用
- Android事件分发机制
- C# 连接 SharepointOnline WebService
- 调用接口获取token时,返回值为{"desc":"CurTime is illegal","code":414}
- 前端性能优化(CSS动画篇)
- C++:标准模板库string
- tomact 部署
- 今天开通博客啦!