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 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 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的远程图片抓取函数分享
2013/09/25 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
原生js实现俄罗斯方块
2020/10/20 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
python利用拉链法实现字典方法示例
2017/03/25 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python实现周期方波信号频谱图
2018/07/21 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
Python 随机按键模拟2小时
2020/12/30 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
《观舞记》教学反思
2014/04/16 职场文书
岗位工作说明书
2014/07/29 职场文书
小学英语复习计划
2015/01/19 职场文书
护士医德考评自我评价
2015/03/03 职场文书
我的1919观后感
2015/06/03 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android