JavaScript——对象和构造函数

单一物件

像所有值一样,对象也具有属性。实际上,您可以将一个对象视为一组属性,其中每个属性都是(键,值)对。键是一个字符串,值是任何JavaScript值。

在JavaScript中,您可以通过对象常量直接创建普通对象:

'use strict';

var jane = {

    name: 'Jane',

    describe: function () {

        return 'Person named '+this.name;

    }

};

前面的对象具有name和的属性describe。您可以读取(“获取”)和写入(“设置”)属性:

> jane.name //获取

> jane.name ='John'; //设定

> jane.newProperty ='abc'; //自动创建的属性

函数值属性,例如如describe被称为方法。它们用于this引用用于调用它们的对象:

> jane.describe()//调用方法

“叫约翰的人”

> jane.name ='Jane';

> jane.describe()

“人叫简”

该in运营商检查是否一个属性是否存在:

>简中的“ newProperty”

真正

>简中的“ foo”

如果读取的属性不存在,则会得到值undefined。因此,前面的两个检查也可以这样执行:[ 2 ]

> jane.newProperty!==未定义

真正

> jane.foo!==未定义

该delete运营商删除一个属性:

>删除jane.newProperty

真正

>简中的“ newProperty”

任意属性键

属性键可以是任何字符串。到目前为止,我们已经在对象文字中和点运算符之后看到了属性键。但是,只有当它们是标识符时,您才能以这种方式使用它们(请参阅标识符和变量名)。如果要使用其他字符串作为键,则必须在对象文字中用引号将它们引起来并使用方括号来获取和设置属性:

> var obj = {'非标识符':123};

> obj ['非​​标识符']

123

> obj ['not a identifier'] = 456;

方括号还允许您计算属性的键:

> var obj = {hello:'world'};

> var x ='hello';

> obj [x]

'世界'

> obj ['hel'+'lo']

'世界'

提取方法

如果提取方法,则该方法将失去与对象的连接。该函数本身不再是方法,而是具有值(在严格模式下)。thisundefined

作为示例,让我们回到先前的对象jane:

'use strict';

var jane = {

    name: 'Jane',

    describe: function () {

        return 'Person named '+this.name;

    }

};

我们describe要从中提取方法jane,将其放入变量中func,然后调用它。但是,这不起作用:

> var func = jane.describe;

> func()

TypeError:无法读取未定义的属性“名称”

解决方案是使用所有功能都具有的方法bind()。它创建一个this始终具有给定值的新函数:

> var func2 = jane.describe.bind(jane);

> func2()

“人叫简”

方法内部的功能

每个功能都有 它自己的特殊变量this。如果您将一个函数嵌套在一个方法内部,这是很不方便的,因为您无法this从该函数访问该方法。下面是一个示例,其中我们forEach使用一个函数来遍历数组:

var jane = {

    name: 'Jane',

    friends: [ 'Tarzan', 'Cheeta' ],

    logHiToFriends: function () {

        'use strict';

        this.friends.forEach(function (friend) {

            // `this` is undefined here

            console.log(this.name+' says hi to '+friend);

        });

    }

}

调用logHiToFriends会产生错误:

> jane.logHiToFriends()

TypeError:无法读取未定义的属性“名称”

让我们看一下解决此问题的两种方法。首先,我们可以存储this在另一个变量中:

logHiToFriends: function () {

    'use strict';

    var that = this;

    this.friends.forEach(function (friend) {

        console.log(that.name+' says hi to '+friend);

    });

}

或者,forEach还有第二个参数,可让您提供以下值this:

logHiToFriends: function () {

    'use strict';

    this.friends.forEach(function (friend) {

        console.log(this.name+' says hi to '+friend);

    }, this);

}

函数表达式通常在JavaScript中用作函数调用的参数。当您this从这些函数表达式之一进行引用时,请务必小心。

构造函数:对象工厂

到现在为止,您可能会认为 JavaScript对象只是从字符串到值的映射,这是JavaScript的对象文字所建议的一种概念,看起来像其他语言的map / dictionary文字。但是,JavaScript对象还支持一种真正面向对象的功能:继承。本节未完全说明JavaScript继承的工作原理,但向您展示了一种入门的简单模式。如果您想了解更多,请查阅第17章。

除了是“真实的”函数和方法之外,函数在JavaScript中还扮演着另一个角色:如果通过运算符调用,它们将成为构造函数(对象的工厂)new。因此,构造函数大致类似于其他语言的类。按照约定,构造函数的名称以大写字母开头。例如:

// Set up instance data

function Point(x, y) {

    this.x = x;

    this.y = y;

}

// Methods

Point.prototype.dist = function () {

    return Math.sqrt(this.x*this.x + this.y*this.y);

};

我们可以看到构造函数有两个部分。首先,该函数Point设置实例数据。其次,属性Point.prototype包含一个带有方法的对象。前者数据特定于每个实例,而后者数据在所有实例之间共享。

要使用Point,我们通过运算符调用它:new

> var p =新Point(3,5);

>像素

3

> p.dist()

5.830951894845301

p是的实例Point:

> p instanceof点

真正

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

推荐阅读更多精彩内容