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 相关文章推荐
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
javascript实现放大镜功能
Dec 09 Javascript
正则验证小数点后面只能有两位数的方法
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
生成卡号php代码
2008/04/09 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
js实现简单的验证码
2015/12/25 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
详解angular element()方法使用
2017/04/08 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
python打开网页和暂停实例
2014/09/30 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
python requests post多层字典的方法
2018/12/27 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
光盘行动倡议书
2014/02/02 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
python实现股票历史数据可视化分析案例
2021/06/10 Python