Javascript函数、构造函数、原型、类和对象

函数

函数是JavaScript中特殊的对象,对函数执行typeof运算会返回字符串"function",因为函数也是对象,他们可以拥有属性和方法。

静态方法

函数在JS中定义了类的名字,任何添加到函数的属性都是类字段和类方法(类比Java中类的static variable 和 static method),下面代码起到Java里面static method的效果:

		var foo = function(){};
		foo.printLog = function(){
			if (arguments.length != 0)
			{
				console.log(Array.prototype.join.call(arguments, " - "));
			}
		};
		foo.printLog("Test", "Static Method");

构造函数

如果函数或者方法的调用之前加上new关键字,他就构成了构造函数的调用.,

构造函数的调用和普通函数,方法的调用在实参处理,调用上下文和返回值方面有不同

(1).实参处理不同

凡是没有形参的构造函数调用都可以省略圆括号

(2)调用上下文的不同

调用构造函数创建一个新的空对象,这个对象继承自构造函数的prototype(原型).构造函数试图初始化这个新对象,并把这个新对象当做构造函数的调用上下文,所以在构造函数中this关键字可以用来引用这个新对象,也就能够在构造函数中初始化这个新对象. 

注意: 尽管构造函数看起来像一个方法调用,它依然会使用这个新对象作为调用上下文。也就是说,在表达式new
o.m() 中,调用上下文并不是o.

例子1-2:

		function A()
		{
			this.a = 123;
			this.init();
		}
		A.prototype = {
			get: function(){console.log('The value of A is ' + this.a);},
			init: function(){
					console.log('do init here');
					this.a=567;
				 }
		}
		var obj = new A;
		obj.get();

(3)返回值不同

构造函数通常不使用return关键字调用完毕之后会返回一个对象(就是新创建的这个对象)

this关键字

this是一个关键字,不是变量也不是属性.

this关键字没有作用域的限制,他只有下面几种情况

(1)一个函数被当做方法调用,则函数中的this指向的是调用它的对象

(2)一个函数被当做函数调用,则函数中的this指向的全局对象(非严格模式)或者是undefined(严格模式下)

(3)函数被当做构造函数调用,this就指向构造函数创建的新对象

例子:

		var a = {name:'frank',age:30};//创建一个新对象
		function A()
		{
			console.log(this);
		}
		A.call(a); //对象a的方法调用:this代表对象a,因为通过call的调用上下文是a
		A();//全局函数调用:this代表全局变量window
		new A();//构造函数调用: this代表新创建的对象A {}

函数原型,每一个函数都包含一个prototype属性,而且这个prototype包含唯一一个属性constructor指向构造函数对象,当将函数用做构造函数的时候,新创建的对象会从原型对象上继承属性,按照惯例,构造函数首字母要大写:

		function Foo(){};//Constructor

		Foo.prototype = {
			constructor:Foo;//因为重写了prototype,需要显示的将constructor定义在此
			userName:"Frank"};
		var fooInstance = new Foo();
		console.log(fooInstance.userName);//As an instance of Foo, it inherited all attributes from Foo's prototype
		console.log(Foo.userName);// 函数对象Foo并没有userName属性,所以是undefined,但是Foo的原型对象有,并且被fooIntance继承
		console.log(fooInstance.constructor === Foo);

注意:每个函数自身就是个对象,所以可以被赋值和像参数一样传递,但同时,它也可以被用作构造函数,用来创建其他对象。

构造函数的prototype是被所有实例共享的,例如:

<script type="text/javascript">
	function Person(){};
	Person.prototype =
		{
			constructor : Person,
			name : "Frank",
			friends : ["Coco","Nancy"],
			sayName: function(){ alert(this.name);}
		};
	var p1 = new Person();
	var p2 = new Person();
	p1.friends.push("Van");
	console.log(p1.friends);
	console.log(p2.friends);
	p1.sayName();

</script>

因为p1和p2共享prototype对象,所以p1的friends改变会影响到p2,这显然不是我们想要的,我们希望每个Person实例有自己单独的属性,但同时,我们又希望对一些公共方法可以共享,以节省内存。

构造方法和原型组合模式

构造方法用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,同时又共享着对方法的引用,最大限度地节省了内存。有点类似于继承,但区别是prototype是单例的。

修改后的写法:

<script type="text/javascript">
	function Person(name, friends){
		this.name = name;
		this.friends = friends;
	};
	Person.prototype =
		{
			constructor : Person,
			sayName: function(){ console.log(this.name);}
		};
	var p1 = new Person("Frank",["coco","nancy"]);
	var p2 = new Person("Daniel",["coco","nancy"]);
	p1.friends.push("Van");
	console.log(p1.friends);
	console.log(p2.friends);
	p1.sayName();
	p2.sayName();
</script>

函数直接量(function literal),匿名函数 (anonymous function)

作为命名空间的函数

在函数中声明的变量在整个函数体内都是可见的,在函数的外部是不可见的(局部变量)。不在任何函数中声明的变量是全局变量,在整个JavaScript程序中都可见。

一种惯用法是用自调用匿名函数(self-invoking anonymous function) 来实现这个命名空间技术,其写法如下

function(){

//模块代码

  })();

因为默认情况下,JS是运行在全局的namespace下,而对全局变量的暴露是非常危险的,因为任何无意的修改和覆盖都会来带意想不到的错误。因此在JS开发中,尽量不要定义全局变量。在JS框架开发中此条法则体现的尤为明显,因为假如框架暴露过多的全局变量,一旦被用户修改,就可能导致框架不可用。

所以在JQuery中,整个框架通过 window.jQuery = window.$ = jQuery; 只向外部暴露了2个全局变量,即著名的$和JQuery

详细请见jQuery源码分析: http://nuysoft.iteye.com/blog/1177451

对象

JavaScript 中,除了数字、true、false、null和undefined之外,其他值都是对象,每个对象拥有三个相关的对象属性(object attribute)

  • 对象的原型(prototype)指向另一个对象,本对象的属性继承自它的原型对象。对象继承是通过原型链实现的
  • 对象的类(class)是一个标识对象类型的字符串
  • 对象的扩展标记(extensible flag)指明了是否可以向该对象添加新属性

对象继承

所有通过对象直接量(Object literals)创建的对象都具有同一个原型对象Object.prototype,对象的属性继承自原型对象,对象之所以会继承是因为属性的查询过程是,搜索对象的原型链,直到根原型,如果还没有找到标识为undefined。

		var o = {};// o 从 Object.prototype 继承对象属性
		o.x =1; // 定义新属性x
		var p = inherit(o);//p继承o和Object.prototype
		p.y = 2;
		var q = inherit(p);//q继承p、o和Object.prototype
		q.z =3 ;
		console.log(q.x + q.y);
		console.log(q.toString() + q.a);//toString继承自Object.prototype, q.a is undefined

		function inherit(parent){
			f = function (){};//定义一个空构造函数
			f.prototype = parent; //将其原型属性设置为p
			return new f();//使用f()创建p的继承对象
		};

上面代码对象在内存中的示意图:

对象工厂

工厂方法这个设计模式在JS中也是经常用到,下面以jQuery源码为例,看一下对象工厂的运用。

	<script language="javascript">
		console.log("Start");

		(function(window){//自调用函数
		   var //定义本地变量
			   core_version = "1.0.0",

			   jQuery = function(){//这是一个工厂方法,专门用来产生jQuery对象
					return new jQuery.fn.init();//下面的prototype赋值使得init函数和jQuery函数据有相同的prototype,即jQuery对象
				};

			jQuery.fn = jQuery.prototype = {
				jquery: core_version,
				constructor: jQuery,
				init: function(){
					return this;
				},
				debug: function(){console.log("debugging")}
			};

			// Give the init function the jQuery prototype for later instantiation
			jQuery.fn.init.prototype = jQuery.fn; 

			window.jQuery = window.$ = jQuery;//将本地变量jQuery设置为全局变量
		}(window));//传入全局变量window

		$().debug();//$()将返回一个通过工厂方法产生的对象。
		console.log("Current version is "+$().jquery);
	</script>
时间: 2024-08-30 22:04:00

Javascript函数、构造函数、原型、类和对象的相关文章

常用Javascript函数与原型功能收藏(必看篇)_javascript技巧

如下所示: // 重复字符串 String.prototype.repeat = function(n) { return new Array(n+1).join(this); } // 替换全部 String.prototype.replaceAll = function(str1, str2) { return this.replace(new RegExp(str1, "gm"), str2); } // 清除空格 String.prototype.trim = function

JavaScript高级程序设计 阅读笔记(十三) js定义类或对象_javascript技巧

工厂方式 创建并返回特定类型的对象. 复制代码 代码如下: function createCar(sColor,iDoors,iMpg){ var oTempCar=new Object(); oTempCar.color=sColor; oTempCar.doors=iDoors; oTempCar.mpg=iMpg; oTempCar.showColor=function(){ alert(this.color); } return oTempCar; } 调用示例: 复制代码 代码如下:

盘点JavaScript函数的基本知识

本文旨在提供web开发人员必须了解的所有JavaScript函数的基本知识. 函数于软件开发者而言并不是什么奇幻世界.如果你的日常活动涉及到编码,哪怕是一点点,那么在一天结束的时候,你一定创建/修改了一个或多个函数. 简而言之函数只不过是一组执行某个操作的语句.函数可能会有一些输入参数(在函数体中使用),并在执行后返回值. JavaScript函数也具有这些特性,但它们不仅仅是常规函数.JavaScript函数是对象.你可以查看我曾经写的关于JavaScript对象的文章,里面我提到几乎Java

在JavaScript中调用Java类和接口的方法_javascript技巧

前言 本文中所有的代码使用 JavaScript 编写,但你也可以用其他兼容 JSR 223 的脚本语言.这些例子可作为脚本文件也可以在交互式 Shell 中一次运行一个语句的方式来运行.在 JavaScript 中访问对象的属性和方法的语法与 Java 语言相同. 本文包含如下几部分: 1.访问 Java 类 为了在 JavaScript 中访问原生类型或者引用 Java 类型,可以调用 Java.type() 函数,该函数根据传入的完整类名返回对应对象的类型.下面代码显示如何获取不同的对象类

JavaScript 函数

JavaScript 函数定义 JavaScript 使用关键字 function 定义函数 函数可以通过声明定义,也可以是一个表达式 函数声明 函数声明的语法 : function sum1(n1,n2){ return n1+n2; }; 函数声明后不会立即执行,会在我们需要的时候调用到 分号是用来分隔可执行JavaScript语句,由于函数声明不是一个可执行语句所以不以分号结束 函数表达式,又叫函数字面量 JavaScript 函数可以通过一个表达式定义 函数表达式可以存储在变量中: va

JavaScript函数的调用以及参数传递_基础知识

JavaScript 函数调用 JavaScript 函数有 4 种调用方式. 每种方式的不同方式在于 this 的初始化.this 关键字 一般而言,在Javascript中,this指向函数执行时的当前对象. Note 注意 this 是保留关键字,你不能修改 this 的值.调用 JavaScript 函数 函数中的代码在函数被调用后执行.作为一个函数调用实例 function myFunction(a, b) { return a * b; } myFunction(10, 2); //

浅析Objective-C Runtime 类与对象教程

Objective-C语言的优势在于:我们写代码时更具灵活性,如我们可以把消息转发给我们想要的对象,或者随意交换一个方法的实现等. 这种特性意味着Objective-C不仅需要一个编译器,还需要一个运行时系统来执行编译的代码.对于Objective-C来说,这个运行时系统就像一个操作系统一样:它让所有的工作可以正常的运行.这个运行时系统即Objc Runtime.Objc Runtime其实是一个Runtime库,它基本上是用C和汇编写的,这个库使得C语言有了面向对象的能力. Runtime库主

JavaScript利用构造函数和原型的方式模拟C#类的功能

 这篇文章主要介绍了JavaScript利用构造函数和原型的方式模拟C#类的功能.需要的朋友可以过来参考下,希望对大家有所帮助 代码如下:     //构造函数         function person(name, age) {             this.name = name;             this.age = age;         }         //定义person原型,原型里的属性可以被自定义对象引用         person.prototype =

JavaScript利用构造函数和原型的方式模拟C#类的功能_javascript技巧

复制代码 代码如下:      //构造函数        function person(name, age) {            this.name = name;            this.age = age;        }        //定义person原型,原型里的属性可以被自定义对象引用        person.prototype = {            getName: function () {                return this.