JavaScript一点通第二节:函数和对象

一、函数

JavaScript中的函数定义分为两种:声明式函数和赋值式函数。而且,函数的名称就是函数的内存地址,和变量一样,指向函数代码所在的内存区域。

// 声明式函数

function fn(name){

var msg = "你好,"+name+",我是一个函数.";

alert(msg);

}

// 赋值式函数

var fn = function(name){

var msg = "你好,"+name+",我是一个函数.";

alert(msg);

}

以上两种表达式中的fn是一样的,都是指向一个函数的指针。alert(fn)的运行结果都是:

1

alert(fn)之所以能够打印函数的声明语句,是因为toString()方法:

function fn(){

var msg = "你好,"+name+",我是一个函数.";

alert(msg);

}

alert(fn.toString());

运行结果是一样的。

那么toString()方法是怎样来的呢?

对于JavaScript来说,函数其实是Function类的对象。比如,我们可以用Function类直接创建上面的fn函数:

var fn = new Function("name","var msg = \"你好,\"+name+\",我是一个函数.\";\nalert(msg);");

alert(fn);

执行结果如下:

2

函数的执行结果也是一样的:

var fn = new Function("name","var msg = \"你好,\"+name+\",我是一个函数.\";\nalert(msg);");

fn("张三");

3

Function对象有length属性,可以查看函数的参数,有valueOf()方法和toString()方法,这两个方法返回的都是函数的源代码。因此,alert(fn)显示的就是函数的声明语句了。

既然函数名是指向函数的变量,那么就可以把函数作为参数传递给另一个函数。

function fn(name){

var msg = "你好,"+name+",我是一个函数.";

alert(msg);

}

function call_fn(func,name){

func(name);

}

call_fn(fn,"张三");

4

JavaScript的函数,使用特殊对象arguments封装了函数的参数,我们无需明确指出参数名,就能访问它们。通过属性 arguments.length可以获得函数的参数个数 。用arguments对象判断传递给函数的参数个数,即可模拟函数重载。下面是官方的一个例子。

function doAdd() {

if(arguments.length == 1) {

alert(arguments[0] + 5);

} else if(arguments.length == 2) {

alert(arguments[0] + arguments[1]);

}

}

doAdd(10);       //输出 "15"

doAdd(40, 20);    //输出 "60"

JavaScript函数中,变量的作用域,要特别注意的一点是:加var关键字的变量是函数内部的局部变量,函数执行完后,变量将销毁;但没有加var关键字的变量,将成为全局变量,函数外可以访问。

function fn(){

var x = 10;

y = 20;

alert("函数内部访问x:"+x+"\n函数内部访问y:"+y);

}

fn();

alert("函数外部访问y:"+y);

alert("函数外部访问x:"+x);

5
6
7

二、对象

JavaScript没有类的概念,只有对象定义。对象是由 new 运算符加上要实例化的对象的名字创建的。其中,要实例化的对象其实就是函数。那么,函数是怎样变成对象的呢?

先看下面这段代码。

function myobj(){

return this;

}

var f = myobj();

var o= new myobj();

alert(f);

alert(o);

我们发现,加了new运算符后,this才指向由myobj创建的对象。

8

而var f = myobj(),这就不是创建对象,其中的this不是指myobj创建的对象,而是代码当前上下文环境的当前对象,比如是window。

9

也就是说,用new运算符调用函数就创建了对象。this代表实例化之后的对象,可以显示的return,但并不需要这么做。以下代码效果是一样的。

function myobj(){

}

var o = new myobj();

alert(o);

10

JavaScript的Object对象与Java中的Object相似,JavaScript中的所有对象都由这个对象继承而来,Object对象中的所有属性和方法都会出现在其他对象中。

Object 对象具有下列属性:

constructor:创建对象的函数(构造函数)的引用(指针)。

Prototype:对该对象的对象原型的引用。对于所有的对象,它默认返回Object对象的一个实例。

还具有几个方法:

hasOwnProperty(property) :判断对象是否有某个特定的属性。必须用字符串指定该属性。(例如,o.hasOwnProperty("name"))。

isPrototypeOf(object) :判断该对象是否为另一个对象的原型。

propertyIsEnumerable :判断给定的属性是否可以用 for...in 语句进行枚举。

toString() :返回对象的原始字符串表示。对于 Object 对象,ECMA-262 没有定义这个值,所以不同的 ECMAScript 实现具有不同的值。

valueOf() :返回最适合该对象的原始值。对于许多对象,该方法返回的值都与 ToString() 的返回值相同。

我们在浏览器的开发者工具的控制台输入new object()回车,可以查看上面那些Object对象的属性和方法。

11

Object对象也可以使用对象字面量语法来创建:var o = {};

同样,我们可以在浏览器的开发者工具中进行验证。

12

javascript支持后绑定,比如这样:

function obj()

{

}

var o = new obj();

o.fn = function(){

alert("hello");

}

o.fn();

13

所以,可以通过函数创建对象,这叫工厂方法:

function createCar(color,doors,mpg) {

var car = new Object();

car.color = color;

car.doors = doors;

car.mpg = mpg;

car.showColor = function() {

alert(this.color);

};

return car;

}

var car1 = createCar("red",4,23);

var car2 = createCar("blue",3,25);

car1.showColor();

car2.showColor();

14
15

比较正规一点的创建对象的方法,用构造函数法,用this代表当前对象了:

function Car(color,doors,mpg) {

this.color = color;

this.doors = doors;

this.mpg = mpg;

this.showColor = function() {

alert(this.color);

};

}

var car1 = new Car("red",4,23);

var car2 = new Car("blue",3,25);

car1.showColor();

car2.showColor();

16
17

构造函数法的问题是,其中的对象方法,比如例子中的showColor方法,每次new的时候都会创建一次,显然浪费内存。

可以用原型链定义对象的方法。这样,所有对象共享一个对象方法,既保证了对象属性的唯一性,也节约了内存:

function Car(color,doors,mpg) {

this.color = color;

this.doors = doors;

this.mpg = mpg;

this.drivers = new Array("Mike","John");

}

Car.prototype.showDrivers = function() {

alert(this.drivers);

};

var car1 = new Car("red",4,23);

var car2 = new Car("blue",3,25);

car1.drivers.push("Bill");

car1.showDrivers();        //输出 "Mike,John,Bill"

car2.showDrivers();        //输出 "Mike,John"

18
19

对象方法,只能是new之后的对象可以访问:

function obj(){

}

obj.prototype.fn = function(){

alert("hello");

}

var o = new obj();

o.fn();

20

但是,如果这样访问obj.fn()就会报错:

function obj(){

}

obj.prototype.fn = function(){

alert("hello");

}

obj.fn();

21

用函数名字直接访问的方法,我们叫函数方法,或者静态方法。

function obj(){

}

obj.fn = function(){

alert("hello");

}

obj.fn();

22

但javascript的静态方法,对象并不能访问,如果这样就会报错:

function obj(){

}

obj.fn = function(){

alert("hello");

}

var o = new obj();

o.fn();

23

还有很重要的一点,原型属性是所有对象共享,如果属性是引用类型,那么就会出现,一个对象修改了数值,其他对象相应的属性数值都会改变的尴尬局面。

function obj(){

}

obj.prototype.names = ["张三","李四"];

var o1 = new obj();

var o2 = new obj();

o1.names.push("o1添加的新的名字");

alert("o1.names:"+o1.names+"\no2.names:"+o2.names);

24

其实,javascript并没有真正的静态方法,只是利用javascript灵活的特性模拟实现的。

本文出自 “老惠” 博客,转载已经过作者同意。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,750评论 2 17
  • 面向对象编程 1.创建,使用函数 var CheckObject = {checkName : function(...
    依米花1993阅读 388评论 0 0
  • ECMAScript关键字 delete do else finally function in instance...
    doudou2阅读 718评论 0 0
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,065评论 1 10
  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 1,153评论 0 0