javascript 面向对象function详解及实例代码


Posted in Javascript onFebruary 28, 2017

javascript 面向对象function详解

    js中的函数有三种表示方式:

//函数的第一种表示方式:函数关键字的方式 
function f1() { 
  alert("f1"); 
} 
//函数的第二种表示方式:函数字面量的方式 
var f2 = function() { 
  alert("f2"); 
} 
//函数的第三种表示方式:构造函数的方式 
var f3 = new Function('var a = 100; b = 200; return a+b;'); 
alert(f3());

       函数的定义方式一般有以上三种,前两种方式基本没什么区别,第三种定义方式(Function()构造函数)每次执行时都解析函数主体,并创建一个新的函数对象。所以当在一个循环或者频繁执行的函数中调用Function()构造函数的效率是非常低的。相反,函数字面量却不是每次遇到都重新编译的。一般不会采用第三种方式。

另外,分别执行alert(f1.constructor); alert(f2.constructor); alert(f3.constructor);都会出现同样的效果,如下:

javascript 面向对象function详解及实例代码

f1.constructor,f2.constructor,f3.constructor都是一个对象,为Function,这里可以这样理解,这三个函数f1,f2,f3都是通过Function的形式产生的,所以他们的构造器就是Function,由此也可以推出这三种函数的产生方式其实内部原理是一样的。

在JavaScript中,每个具有原型的对象都会自动获得constructor属性。对象的constructor属性用于返回创建该对象的函数,也就是我们常说的构造函数。实际上,在js中,每一个function都是一个Function Object。

javascript 面向对象function详解及实例代码

总结:

1、在js中一切皆对象;

2、在js中对象有一个属性为constructor;

3、在js中,凡是函数都是构造器对象

另外,从面向对象的角度来理解,上面实例中f1是一个函数,同时它也是一个对象,constructor可以理解为它的一个属性,并且这里可以利用该对象的constructor属性找到它的构造函数。

可以为f1这个对象动态的添加属性:

//给f1对象添加一个属性为b,值为5 
f1.b = 5; 
alert(f1.b); 
//给f1对象添加一个属性为bb,bb为对象,值为var f2 = function() { alert("f2");} 
f1.bb = f2; 
alert(f1.bb);

在js中,任何一个对象都有可能成为另一个对象的属性。

一个对象可以动态的添加任何一个属性,但是这个对象必须有值,不能是null和undefined。

function Person() { 
  //do something 
} 
function P() { 
  //do something 
} 
function A() { 
  //do something 
} 
function B() { 
  //do something 
} 
Person.a = P; 
Person.a.b = A; 
Person.a.b.c = B; 
Person.a.b.c.d = f2; 
alert(Person.a.b.c.d); //正确,因为Person.a.b.c是有值的 
alert(Person.a.b.c.d.e.f); //错误,不能为Person.a.b.c.d.e增加属性f,因为Person.a.b.c.d.e是undefined

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
正则验证小数点后面只能有两位数的方法
Feb 28 #Javascript
原生js实现鼠标跟随效果
Feb 28 #Javascript
canvas实现简易的圆环进度条效果
Feb 28 #Javascript
JS实现的tab切换选项卡效果示例
Feb 28 #Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 #Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 #Javascript
canvas红包照片实例分享
Feb 28 #Javascript
You might like
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
js 实现 input type="file" 文件上传示例代码
2013/08/07 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python复制与引用用法分析
2015/04/08 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
简单了解Django ContentType内置组件
2019/07/23 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
考试不及格检讨书
2014/01/09 职场文书
财务主管自我鉴定
2014/01/17 职场文书
空气环保标语
2014/06/12 职场文书
公司踏青活动方案
2014/08/16 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
《青山不老》教学反思
2016/02/22 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python