javascript原型链
2016-06-11 14:41
741 查看
javascript语言中,没有类的概念。如何在前端开发中,融入OOP的思想呢?
在此之前,我们先要弄清楚function,new这两个关键字都做了些什么。
function:
使用function 实现 javascript函数申明。函数我们都会用,然而javascript的函数到底是什么?
让我们从最简单的函数开始:javascript数据是存在栈内存(stack)和堆内存(heap)里的。堆内存存储javascript对象的具体内容,而栈内存存储对象的地址,下面的代码:
sum存储在栈内存,function(){return a+b;}存储在堆内存里面。sum记录的是function(){return a+b;}在堆内存的地址。(是不是让你想起c的指针了)
你应该还记得javascript的原生对象吧?Object, Function, Array....
结果是true
你用function创建了一个对象!javascript的函数其实是对象,而函数名是指向对象的指针。
现在让我们来看看,这个对象的三个特殊属性,constructor,prototype,__proto__
constructor:
说明任何一个函数都是通过Function对象构造出来的。
prototype:
说明任何一个函数都构造了一个原型对象,并通过prototype指向这个对象。
__proto__:
对象的__proto__属性,指向其构造函数的原型对象。
new:
按照javascript语言精粹中所说,如果在一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将被绑定到那个新对象上。
这就是javascript的原型链。
1,做一个测试
2,原型链图
描述: javascript原型链
大小: 40.2 KB
查看图片附件
在此之前,我们先要弄清楚function,new这两个关键字都做了些什么。
function:
使用function 实现 javascript函数申明。函数我们都会用,然而javascript的函数到底是什么?
让我们从最简单的函数开始:javascript数据是存在栈内存(stack)和堆内存(heap)里的。堆内存存储javascript对象的具体内容,而栈内存存储对象的地址,下面的代码:
function sum(a,b) { return a+b; }
sum存储在栈内存,function(){return a+b;}存储在堆内存里面。sum记录的是function(){return a+b;}在堆内存的地址。(是不是让你想起c的指针了)
你应该还记得javascript的原生对象吧?Object, Function, Array....
sum instanceof Function
结果是true
你用function创建了一个对象!javascript的函数其实是对象,而函数名是指向对象的指针。
现在让我们来看看,这个对象的三个特殊属性,constructor,prototype,__proto__
constructor:
sum.constructor === Function //true
说明任何一个函数都是通过Function对象构造出来的。
prototype:
typeof sum.prototype === "object" //true sum.prototype.constructor === sum //true
说明任何一个函数都构造了一个原型对象,并通过prototype指向这个对象。
__proto__:
sum.__proto__ === Function.prototype
对象的__proto__属性,指向其构造函数的原型对象。
new:
按照javascript语言精粹中所说,如果在一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将被绑定到那个新对象上。
这就是javascript的原型链。
1,做一个测试
function person(){ this.name = 'James'; } var p = new person(); console.log(p.__proto__ === person.prototype); console.log(p.constructor === person); console.log('---------------------'); console.log(person.prototype.constructor === Function); console.log(person.prototype.__proto__ === Object.prototype); console.log(person.__proto__ === Function.prototype); console.log(person.constructor === Function); console.log(person.prototype.constructor === person); console.log('---------------------'); console.log(Object.__proto__ === Function.prototype); console.log(Function.__proto__ === Function.prototype); console.log(Object.constructor === Function); console.log(Object.prototype.constructor === Object); console.log(Object.prototype.__proto__); console.log('---------------------'); console.log(Object.prototype.__proto__); console.log(Function.prototype.__proto__ === Object.prototype);
2,原型链图
描述: javascript原型链
大小: 40.2 KB
查看图片附件
相关文章推荐
- js取小数后两位
- js函数定义 参数只要写名称就可以了
- 构建WebIM聊天程序
- js调用的注意项
- js 排序
- js note 2
- js 中时间戳转换格式化日期
- 谈谈JsBridge实现
- Remove Duplicates from Sorted List
- js获取客户端IP及地理位置
- JavaScript的数据类型和变量声明以及js的语句
- 菜鸟碎碎念之JS+Echarts
- JavaScript手机振动API
- JavaScript地理位置信息API
- JS去重方法
- JS设计模式之适配器模式
- javascript之正则表达式
- JavaScript 全选函数的实现
- 游览器中javascript的执行过程
- Javascript 异步加载详解