javascript 面向对象function详解及实例代码

 更新时间:2017年02月28日 11:15:38   作者:H_Gao  
这篇文章主要介绍了javascript 面向对象function详解及实例代码的相关资料,需要的朋友可以参考下

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);都会出现同样的效果,如下:

f1.constructor,f2.constructor,f3.constructor都是一个对象,为Function,这里可以这样理解,这三个函数f1,f2,f3都是通过Function的形式产生的,所以他们的构造器就是Function,由此也可以推出这三种函数的产生方式其实内部原理是一样的。

在JavaScript中,每个具有原型的对象都会自动获得constructor属性。对象的constructor属性用于返回创建该对象的函数,也就是我们常说的构造函数。实际上,在js中,每一个function都是一个Function Object。

总结:

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 

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • FF下zoom的替代方案 单位em

    FF下zoom的替代方案 单位em

    css 属性zoom是ie私有属性 在FF中(或者说仅实现CSS标准的其他浏览器中)无法使用,一直在网上搜索它的替代方案,但没有收获,后来听群里有朋友说em或可解决此问题,经过研究和测试,发现果然可以解决。
    2008-08-08
  • 兼容ie、firefox的图片自动缩放的css跟js代码分享

    兼容ie、firefox的图片自动缩放的css跟js代码分享

    最近编辑反应,图片有时候太大了,如果隐藏了,可能部分内容别人就看不到了,如果手工设置图片大小又太麻烦了,这里就提供一个方法让也没的图片等比例缩放
    2013-08-08
  • 前端面试知识点锦集(JavaScript篇)

    前端面试知识点锦集(JavaScript篇)

    这篇文章主要为大家分享了前端面试知识点锦集JavaScript篇,细致的给出了每个js面试知识点的答案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 使用webpack3.0配置webpack-dev-server教程

    使用webpack3.0配置webpack-dev-server教程

    这篇文章主要介绍了使用webpack3.0配置webpack-dev-server教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 50行代码实现Webpack组件使用次数统计

    50行代码实现Webpack组件使用次数统计

    这篇文章主要介绍了50行代码实现Webpack组件使用次数统计,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • H5 js点击按钮复制文本到粘贴板

    H5 js点击按钮复制文本到粘贴板

    这篇文章主要为大家详细介绍了H5 js点击按钮复制文本到粘贴板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • javascript 日期工具汇总

    javascript 日期工具汇总

    这篇文章主要为大家详细介绍了javaScript日期工具类的汇总,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 浅谈JS如何写出漂亮的条件表达式

    浅谈JS如何写出漂亮的条件表达式

    条件表达式,是我们在coding过程中永远躲不开的问题,也是我们骗代码行数最方便的东西,但作为一名程序员,我们也要追求自己的“信达雅”,下面就让我们看看以下几种常见的条件表达场景,如何写的漂亮!
    2021-05-05
  • js实现下拉框选择要显示图片的方法

    js实现下拉框选择要显示图片的方法

    这篇文章主要介绍了js实现下拉框选择要显示图片的方法,涉及针对js操作select的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript获取上传进度的几种方式实现

    JavaScript获取上传进度的几种方式实现

    进度条的应用是为了显示的告诉用户文件上传了多少,本文主要介绍了JavaScript获取上传进度的几种方式,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08

最新评论