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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
JS实现数组的增删改查操作示例
Aug 29 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
正则验证小数点后面只能有两位数的方法
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 数字左侧自动补0
2008/03/31 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
详解python中递归函数
2019/04/16 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
wxPython实现分隔窗口
2019/11/19 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
鱼油专家:Omegavia
2016/10/10 全球购物
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
集体婚礼证婚词
2014/01/13 职场文书
安全责任书范文
2014/08/25 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
2015暑假实习报告范文
2015/07/13 职场文书