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

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

赞 (0)

相关推荐

  • javascript 面向对象 function类

    如下: 复制代码 代码如下: function Student() { //定义类Student中的字段,并赋予初值,但此字段的访问权限是public this.studentNo = 's001'; this.studentName = '小明'; this.sex = '男'; //定义类Student中的方法updateStudentName ,用于修改studentName 值 this.updateStudentName = function(studentName) { this.s

  • js面向对象设计用{}好还是function(){}好(构造函数)

    在网上看了很多JavaScript的项目, 用到对象都是采用{}的形式: 例如jQuery, TinyMCE等都是形如: 复制代码 代码如下: var Dialog = { int : function() { .... }, insert : function() { .... }, pop : function() { .... } }; //调用就是: Dialog.init(); 而我自己一直使用function闭包的方式, 感觉使用内部私有成员(函数,变量)更方便: 复制代码 代码如下

  • javascript 面向对象编程 function也是类

    javascript 面向对象编程 function也是类

    但javascript中并没有类概念,所谓的类也是模拟而来,通过函数加闭包模拟出类成员及私有成员(关于闭包可以参见跨越边界: 闭包).这里我们将用比较平实的方式来了解一下javascript中的"类",避开一些生硬的原理. 既然是用function来模拟类,所以编写代码创建类的关键字还是function.我们创建一个座标点类. function Point() { this.X = 0; this.Y = 0; };  var zeroPoint = new Point(); aler

  • javascript 面向对象编程 function是方法(函数)

    javascript 面向对象编程 function是方法(函数)

    好程序不是写给computer的,而是写给human的.遇到复杂功能,应该想着把它简化.组件化,把小功能封装成小组件,小功能块可以任意的组合得到千变万化的复杂功能.function就可以帮助我们把功能进行封装.那什么是封装呢.要我说,只要把具体实现给打包,对外提供调用接口那就是封装,方法也好.类也好就做了这些事. javascript中的function可以用来创建方法.也可以用来创建类,实际上我们可以认为是用function来模拟出的类(说到类一般都会要去了解闭包的知识).还是先看一下方法吧.

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

    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;'

  • JavaScript 栈的详解及实例代码

    JavaScript 栈的详解及实例代码

    JavaScript 栈 栈是一种遵从先进后出(LIFO)原则的有序集合. 新添加或待删除的元素都保存在栈的末尾,称作栈顶,另一端就叫栈底. 在栈里,新元素都靠近栈顶,旧元素都接近栈底 昨天因为有点事没有更新,今天打算给大家讲讲JavaScript实现的数据结构 数据结构与算法是程序语言的灵魂,是解决一切编程问题的基础 以前学C/C++的时候,感觉算法还是非常重要的,但是前端涉及的并不多 不管怎样,作为技术人员,理解一些基本数据结构和算法应该是必须的 而且我们的JavaScript实现数据结构和

  • javascript replace()用法详解附实例代码

    replace()最简单的算是能力就是简单的字符替换.示例代码如下: var strM = "javascript is a good script language"; //在此我想将字母a替换成字母A alert(strM.replace("a","A")); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 我想大家运行后可以看到结果,它只替换了首字母.但如果加上正则表达式结果就不一样了!呵呵,没错.replace()支持正则表达

  • javascript DOM的详解及实例代码

    javascript DOM 总结 一直以为DOM(文档对象模型)是JS中最简单的一部分.不可否认,它确实很简单,因为DOM的思维模式有点固定,只需要简单地记住一些固定的方法,所以DOM可以说是所有js(这里指的是客户端的js)入门的起手点. 最近我在做一些有用到DOM的练习时,发现自己的DOM知识非常零散(一直以为掌握的很好),可能有很多朋友都觉得,DOM嘛,也就调用调用几个方法,或者我直接使用jQuery,根本不用考虑DOM的细节.是,这也没错,jQuery对DOM的封装可谓前无古人,但是正

  • JavaScript 闭包机制详解及实例代码

    JavaScript 闭包机制详解及实例代码

    首先要区分两个概念,一是匿名函数,一是闭包. 所谓匿名函数,就是创建函数没有给定函数名.经常出现的包括函数表达式,就是定义一个匿名函数,然后将函数赋值给某个变量,而此时这个变量就相当于该函数的函数名,例如: var sayHi = function(){ alert("Hi"); }; //注意这个分号 sayHi(); //调用函数 还有一种常用匿名函数的情况是回调函数,如 JQuery 中常用到的: $("p").click(function(){ alert(

  • JS 实现计算器详解及实例代码（一）

    JS 实现计算器详解及实例代码（一）

    Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板

  • 微信小程序中实现一对多发消息详解及实例代码

    微信小程序中实现一对多发消息详解及实例代码 微信小程序中各个界面之间的传值和通知比较蛋疼.所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心. 通知中心可以做到:1对多发消息,传递object.使用十分简洁. 使用时,在需要接收消息的界面注册一个通知名.然后在需要发消息的界面post这个通知名就可以了.可以在多个界面注册同一个通知名.这样就可以1对多发消息. 使用方法: 1:在app.js中引用notification.js var notificationCenter = re

  • MyBatis获取数据库自生成的主键Id详解及实例代码

    MyBatis获取数据库自生成的主键Id详解及实例代码 在使用MySQL数据库时我们一般使用数据库的自增主键自动产生主键.如果在插入主表时,我们需要同时插入从表的数据,这时我们通常需要知道主表插入时自动产生的主键Id值. 下面介绍使用MyBatis进行插入时,如何同时获取数据库自生成的主键: 1.XML配置文件 <insert id="insert" parameterType="Person" useGeneratedKeys="true"

  • MySQL 序列 AUTO_INCREMENT详解及实例代码

    MySQL 序列 AUTO_INCREMENT详解及实例代码 MySQL序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想实现其他字段也实现自动增加,就可以使用MySQL序列来实现. 本章我们将介绍如何使用MySQL的序列. 使用AUTO_INCREMENT MySQL中最简单使用序列的方法就是使用 MySQL AUTO_INCREMENT 来定义列. 实例 以下实例中创建了数据表insect, insect中id无需指定值可实现自动增长. mysql>

  • Java 两种延时thread和timer详解及实例代码

    Java 两种延时thread和timer详解及实例代码 在Java中有时候需要使程序暂停一点时间,称为延时.普通延时用Thread.sleep(int)方法,这很简单.它将当前线程挂起指定的毫秒数.如 try { Thread.currentThread().sleep(1000);//毫秒 } catch(Exception e){} 在这里需要解释一下线程沉睡的时间.sleep()方法并不能够让程序"严格"的沉睡指定的时间.例如当使用5000作为sleep()方法的参数时,线 程

随机推荐