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 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
swiper实现导航滚动效果
Dec 13 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
use jscript with List Proxy Server Information
2007/06/11 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
详解vue 数据传递的方法
2018/04/19 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
Python进阶之递归函数的用法及其示例
2018/01/31 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
python实现画循环圆
2019/11/23 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
学生实习介绍信
2014/01/15 职场文书
遗产继承公证书
2014/04/09 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
天坛导游词
2015/02/02 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技