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 07 Javascript
javascript 贪吃蛇实现代码
Nov 22 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 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
用session做客户验证时的注意事项
2006/10/09 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
php购物车实现方法
2015/01/03 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
js中eval详解
2012/03/30 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
sails框架的学习指南
2014/12/22 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python 排序算法总结及实例详解
2016/09/28 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
图解Python变量与赋值
2018/04/03 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
基于python实现高速视频传输程序
2019/05/05 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
请解释virtual关键字的含义
2015/06/17 面试题
大学生军训自我鉴定
2014/02/12 职场文书
学生期末评语大全
2014/04/30 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
爱情保证书
2015/01/17 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python