闲聊javascript继承和原型
2016-01-05 23:31
639 查看
javascript继承已经是被说烂的话题了,我就随便聊一点~
一、javascript的复制继承
javascript的继承有复制继承和原型继承,基于复制继承用的不太多,而且无法通过instanceof的验证
二、javascript原型继承
js原型继承是基于原型链查找的,js每个函数都有prototype属性和__proto__属性,每个实例的__proto__属性都指向函数的prototype(es6里面实例的__proto__都指向这个函数),下面这个例子证明了这个观点。
实例在查找方法的时候按原型链查找,先找自身的属性,没有就到构造函数的prototype里找,没有再到构造函数的构造函数的prototype里找,只到Function的prototype。那我们让a的prototype等于A的实例,不就完成了继承了么。
这里继承是用了一个bridge函数做了桥,因为当A有很多内容的时候,实例化A消耗比较多,而且并没有什么用,就用一个空函数做桥接一下。这里最后再改一下实例的构造函数指向自己,这就完成了继承。
这里b的__proto__是指向构造函数的prototype的。
一、javascript的复制继承
javascript的继承有复制继承和原型继承,基于复制继承用的不太多,而且无法通过instanceof的验证
//拷贝继承,prototype.js的extend=> function extend(destination,source){ for(var property in source) destination[property]=source[properyt]; return destination; }
二、javascript原型继承
js原型继承是基于原型链查找的,js每个函数都有prototype属性和__proto__属性,每个实例的__proto__属性都指向函数的prototype(es6里面实例的__proto__都指向这个函数),下面这个例子证明了这个观点。
function A(){ console.log(this.__proto__.aa);//1 this.aa=2 } A.prototype={ aa:1 } var a=new A; console.log(a.aa);//2 a.__proto__={ aa:3 } delete a.aa;//删除特权属性 console.log(a.aa);//3
实例在查找方法的时候按原型链查找,先找自身的属性,没有就到构造函数的prototype里找,没有再到构造函数的构造函数的prototype里找,只到Function的prototype。那我们让a的prototype等于A的实例,不就完成了继承了么。
function A(){} A.prototype={ aa:1 } function bridge(){}; bridge.prototype=A.prototype; function B(){} B.prototype=new bridge(); B.prototype.constructor=B;
这里继承是用了一个bridge函数做了桥,因为当A有很多内容的时候,实例化A消耗比较多,而且并没有什么用,就用一个空函数做桥接一下。这里最后再改一下实例的构造函数指向自己,这就完成了继承。
var b=new B; B.prototype.cc=function(){ alert(3) } console.log(b.__proto__==B.prototype);//true console.log(b.__proto__.__proto__===A.prototype);//true
这里b的__proto__是指向构造函数的prototype的。
相关文章推荐
- Day-13 用js的dom操作实现图片切换
- js判断当前操作系统
- javascript常用判断写法
- jsp/jstl引擎1.0.1.2发布
- javascript进阶系列专题:闭包(Closure)
- Web模版引擎-Mustache
- 对js运算符“||”
- 对js运算符“||”
- JavaScript函数基础
- 【Make a H5 game】JS for beginner——FROM U2B
- js的instanceof 运算符vs typeof 运算符
- js跨域
- JS_变量
- JavaScript学习之旅--this指向问题
- js实现5s后跳转页面
- 优化js脚本设计,防止浏览器假死
- Javascript中判断数组的正确姿势
- 设定延时函数setTimeout
- 设定延时函数setTimeout
- JS面向对象(仿邮箱登录提示框)