JavaScript极简入门教程(二):对象和函数

阅读本文需要有其他语言的编程经验。

JavaScript 中的简单类型包括:

1.数字
2.字符串
3.布尔(true 和 false)
4.null
5.undefined

此外的其他类型均是对象(我们不要被 typeof 操作符的返回值所迷惑),例如:

1.函数
2.数组
3.正则表达式
4.对象(对象自然也是对象)

对象基础

在 JavaScript 中,对象是属性的集合(对象为关联数组),每个属性包括:

1.属性名,必须为字符串
2.属性值,可以为除了 undefined 之外的任何值

通过对象 literal 创建对象:

代码如下:

// 通过对象 literal {} 创建空对象
var empty_object = {};

对象的属性名和属性值:

代码如下:

var stooge = {
    // "first-name" 为属性名,"Jerome" 为属性值
    "first-name": "Jerome",
    // "last-name" 为属性名,"Howard" 为属性值
    "last-name": "Howard"
};

如果属性名是合法的标识符,那么可以省略引号:

代码如下:

var flight = {
    airline: "Oceanic",
    number: 815,
    departure: {
        IATA: "SYD",
        time: "2004-09-22 14:55",
        city: "Sydney"
    },
    arrival: {
        IATA: "LAX",
        time: "2004-09-23 10:42",
        city: "Los Angeles"
    }
};

我们看一下属性访问的例子:

代码如下:

var owner = { name: "Name5566" };
 
owner.name; // "Name5566"
owner["name"]; // "Name5566"
 
owner.job; // undefined
owner.job = "coder"; // 或者 owner["job"] = "coder";

如果属性名不是合法标识符,那么需要用引号包裹。不存在的属性值为 undefined。对象是通过引用而非按值传递:

代码如下:

var x = {};
var owner = x;
owner.name = "Name5566";
x.name; // x.name === "Name5566"

这里 x 和 owner 引用同一个对象。

对象的属性可以使用 delete 操作符删除:

代码如下:

delete obj.x; // 删除对象 obj 的 x 属性

对象的原型(prototype)

每一个对象都被链接了一个原型对象(prototype object),对象能够从原型对象中继承属性。我们通过对象 literal 创建一个对象,它的原型对象为 Object.prototype 对象(Object.prototype 对象本身没有原型对象)。我们在创建对象的时候,可以设置对象的原型对象(之后再讨论具体的设置方法)。在尝试获取(而非修改)对象的某个属性时,如果该对象不存在此属性,那么 JavaScript 会尝试从此对象的原型对象中获取此属性,如果原型对象中没有该属性,那么再从此原型对象的原型对象中查找,以此类推,直到 Object.prototype 原型对象。相比获取属性而言,我们修改对象的某个属性时,不会影响原型对象。

函数基础

在 JavaScript 中函数也是对象,其链接到 Function.prototype 原型对象(Function.prototype 链接到 Object.prototype)。函数存在一个名为 prototype 的属性,其值的类型为对象,此对象存在一个属性 constructor,constructor 的值为此函数:

代码如下:

var f = function() {}
 
typeof f.prototype; // 'object'
typeof f.prototype.constructor; // 'function'
 
f === f.prototype.constructor; // true

函数是对象,你可以像使用对象一样使用函数,也就是说,函数可以保存在变量、数组中,可以作为参数传递给函数,函数内部可以定义函数。附带提及一下,函数有两个被隐藏的属性:

1.函数的上下文
2.函数的代码

函数的创建如下:

代码如下:

var f = function add(a, b) {
    return a + b;
}
 
console.log(f); // 输出 [Function: add]

关键字 function 后的函数名是可选的,我们制定函数名主要出于几个目的:

1.为了递归调用
2.被调试器、开发工具等用来标识函数

很多时候我们并不需要函数名,没有函数名的函数被叫做匿名函数。有括号包裹的为参数列表。JavaScript 不要求实参和形参匹配,例如:

代码如下:

var add = function(a, b) {
    return a + b;
}
 
add(1, 2, 3); // 实参和形参不匹配

如果实参过多,那么多余的实参会被忽略,如果实参过少,那么未被赋值的形参的值为 undefined。函数一定有一个返回值,如果没有通过 return 语句指定返回值,那么函数返回值为 undefined。

一个函数和其访问的外部变量组成一个闭包。这是 JavaScript 的关键魅力所在。

函数调用

每个函数被调用时,会接收到两个额外的参数:

1.this
2.arguments

this 的值和具体调用的模式有关,在 JavaScript 中有四种调用模式:

1.方法调用模式。对象的属性如果是函数,则称其为方法。如果一个方法通过 o.m(args) 被调用,this 为对象 o(由此可见,在调用时,this 和 o 才进行绑定),例如:

代码如下:

var obj = {
    value: 0,
    increment: function(v) {
        this.value += (typeof v === 'number' ? v : 1);
    }
};
obj.increment(); // this === obj

2.函数调用模式。如果一个函数不是一个对象的属性,那么它将作为一个函数被调用,这时候 this 被绑定到全局对象上,例如:

代码如下:

message = 'Hello World';
var p = function() {
 console.log(this.message);
}
 
p(); // 输出 'Hello World'

这种行为有时候让人疑惑,看一个例子:

代码如下:

obj = {
    value: 0,
    increment: function() {
        var helper = function() {
            // 对全局对象中的 value 加 1
            this.value += 1;
        }
 
        // helper 被作为一个函数来调用
        // 因此 this 为全局对象
        helper();
    }
};
 
obj.increment(); // obj.value === 0

我们期望的结果应该是:

代码如下:

obj = {
    value: 0,
    increment: function() {
        var that = this;
        var helper = function() {
            that.value += 1;
        }
 
        helper();
    }
};
 
obj.increment(); // obj.value === 1

3.构造函数调用模式。意图使用 new 前缀的函数被叫做构造函数,例如:

代码如下:

// Test 被叫做构造函数
var Test = function(string) {
    this.message = string;
}
 
var myTest = new Test("Hello World");

一个函数前面可以加上 new 来调用(这样的函数通常大写开头),加上 new 之后将创建一个链接到此函数的 prototype 属性的对象,且构造函数中 this 为此对象。

4.apply 调用模式。函数的 apply 方法被用于调用函数,其有两个参数,第一个为 this,第二个为参数数组,例如:

代码如下:

var add = function(a, b) {
    return a + b;
}
 
var ret = add.apply(null, [3, 4]); // ret === 7

函数调用时,我们能够访问一个名为 arguments 的类数组(非真正的 JavaScript 数组),其包含了所有的实参,这样我们就能实现变长参数:

代码如下:

var add = function() {
    var sum = 0;
    for (var i=0; i<arguments.length; ++i) {
        sum += arguments[i];
    }
    return sum;
}
 
add(1, 2, 3, 4);

异常

现在来说说 JavaScript 的异常处理机制。我们使用 throw 语句来抛出异常,try-cache 语句来捕获并处理异常:

代码如下:

var add = function (a, b) {
    if (typeof a !== 'number' || typeof b !== 'number') {
        // 抛出异常
        throw {
            name: 'TypeError',
            message: 'add needs numbers'
        };
    }
    return a + b;
}
 
// 捕获并处理异常
try {
    add("seven");
// e 为抛出的异常对象
} catch (e) {
    console.log(e.name + ': ' + e.message);
}

为JavaScript 类型添加属性

JavaScript 中大多数类型存在构造函数:

1.对象的构造函数为 Object
2.数组的构造函数为 Array
3.函数的构造函数为 Function
4.字符串的构造函数为 String
5.数字的构造函数为 Number
6.布尔的构造函数为 Boolean
7.正则表达式的构造函数为 RegExp

我们可以向构造函数的 prototype 添加属性(常添加方法),使得此属性对相关变量可用:

代码如下:

Number.prototype.integer = function() {
    return Math[this < 0 ? 'ceil' : 'floor'](this);
}
 
(1.1).integer(); // 1

作用域

JavaScript 需要通过函数来构建作用域:

代码如下:

function() {
    // ...
}();

这里创建并执行了一个匿名函数。通过作用域能够隐藏不希望暴露的变量:

代码如下:

var obj = function() {
    // 隐藏 value,外部无法访问
    var value = 0;
 
    return {
        // 仅此方法可以修改 value
        increment: function() {
            value += 1;
        },
        // 仅此方法可以读取 value
        getValue: function() {
            return value;
        }
    };
}();
 
obj.increment();
obj.getValue() === 1;

继承

JavaScript 实现继承的方式很多。
在创建对象时,我们可以设置对象关联的原型对象,我们这样做:

代码如下:

// 创建一个对象 o,其原型对象为 {x:1, y:2}
var o = Object.create({x:1, y:2});

Object.create 方法被定义在 ECMAScript 5 中,如果你使用 ECMAScript 3 时可以自己实现一个 create 方法:

代码如下:

// 如果未定义 Object.create 方法
if (typeof Object.create !== 'function') {
    // 创建 Object.create 方法
    Object.create = function (o) {
        var F = function () {};
        F.prototype = o;
        // 创建一个新对象,此对象的原型对象为 o
        return new F();
    };
}

通过 Object.create 方法我们进行基于原型继承:一个新对象直接继承一个旧对象的属性(相对于基于类的继承,这里无需类的存在,对象直接继承对象)。范例:

代码如下:

var myMammal = {
    name: 'Herb the Mammal',
    get_name: function() {
        return this.name;
    },
    says: function() {
        return this.saying || '';
    }
};
 
// 继承 myMammal
var myCat = Object.create(myMammal);
myCat.name = 'Henrietta';
myCat.saying = 'meow';
myCat.purr = function(n) {
    var i, s = '';
    for (i = 0; i < n; i += 1) {
        if (s) {
            s += '-';
        }
        s += 'r';
    }
    return s;
};
myCat.get_name = function() {
    return this.says() + ' ' + this.name + ' ' + this.says();
};

上面的代码很简单,但是没法保护私有成员。我们可以使用模块模式。在模块模式中,某类对象由一个函数产生,并利用函数作用域保护私有成员不被外部访问:

代码如下:

// mammal 函数,用于构造 mammal 对象
var mammal = function(spec) {
    // that 为构造的对象
    var that = {};
 
    // 公有方法 get_name 可被外部访问
    that.get_name = function() {
        // spec.name 外部无法直接访问
        return spec.name;
    };
 
    // 公有方法 says 可被外部访问
    that.says = function() {
        // spec.saying 外部无法直接访问
        return spec.saying || '';
    };
 
    return that;
};
 
// 创建 mammal 对象
var myMammal = mammal({name: 'Herb'});
 
// cat 函数,用于构造 cat 对象
var cat = function(spec) {
    spec.saying = spec.saying || 'meow';
 
    // cat 继承自 mammal,因此先构造出 mammal 对象
    var that = mammal(spec);
 
    // 添加公有方法 purr
    that.purr = function(n) {
        var i, s = '';
        for (i = 0; i < n; i += 1) {
            if (s) {
                s += '-';
            }
            s += 'r';
        }
        return s;
    };
 
    // 修改公有方法 get_name
    that.get_name = function() {
        return that.says() + ' ' + spec.name +
            ' ' + that.says();
        return that;
    };
};
 
// 创建 cat 对象
var myCat = cat({name: 'Henrietta'});

在模块模式中,继承是通过调用构造函数来实现的。另外,我们还可以在子类中访问父类的方法:

代码如下:

Object.prototype.superior = function(name) {
    var that = this, method = that[name];
    return function() {
        return method.apply(that, arguments);
    };
};
 
var coolcat = function (spec) {
    // 获取子类的 get_name 方法
    var that = cat(spec), super_get_name = that.superior('get_name');
    that.get_name = function(n) {
        return 'like ' + super_get_name() + ' baby';
    };
    return that;
};

(0)

相关推荐

  • JavaScript函数详解

    简介 在很多传统语言(C/C++/Java/C#等)中,函数都是作为一个二等公民存在,你只能用语言的关键字声明一个函数然后调用它,如果需要把函数作为参数传给另一个函数,或是赋值给一个本地变量,又或是作为返回值,就需要通过函数指针(function pointer).代理(delegate)等特殊的方式周折一番. 而在JavaScript世界中函数却是一等公民,它不仅拥有一切传统函数的使用方式(声明和调用),而且可以做到像简单值一样赋值.传参.返回,这样的函数也称之为第一级函数(First-cla

  • PHP加密函数 Javascript/Js 解密函数

    以下函数代码中"123456" 是个加密的key,自己可以随便改.php加密,js解密,貌似没什么意义,主要是key在js中会被看到.不过在某些地方可能会用到. PHP加密函数 复制代码 代码如下: <?php    function strencode($string) {       $string = base64_encode ( $string );       $key = md5 ( '123456' );       $len = strlen ( $key );

  • 详谈JavaScript 匿名函数及闭包

    1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种:这也是最常规的一种 复制代码 代码如下: function double(x){     return 2 * x;   } 第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用. 复制代码 代码如下: var double = new Functio

  • JavaScript中valueOf函数与toString方法深入理解

    JavaScript中valueOf函数方法是返回指定对象的原始值.使用方法: object.valueOf( )object是必选项参数是任意固有 JScript 对象. 每个JavaScript固有对象的 valueOf 方法定义不同. 对象 返回值 Array 数组的元素被转换为字符串,这些字符串由逗号分隔,连接在一起.其操作与 Array.toString 和 Array.join 方法相同. Boolean Boolean 值. Date 存储的时间是从 1970 年 1 月 1 日午

  • JavaScript回调(callback)函数概念自我理解及示例

    此文适合JavaScript入门级选手阅读,高手就可以飘过了. 先扯点闲话.在中国,有这么一种现象:不管什么词或者概念,总会有些人把这些东西解释的神乎其神,貌似搞得别人听不懂就觉得自己很厉害的样子.其实不知道有多2.我个人比较崇尚简洁明了.什么词,什么概念,如果你能用简短的一两句话让大家听明白,这才是本事.好了,闲话不扯了,进入正题. 在JavaScript里什么叫Callback"回调函数",用我的话来讲就是把方法b当做一个参数传递个方法a,当方法a执行完后执行另外一个指定函数(这里

  • javascript 终止函数执行操作

    1.如果终止一个函数的用return即可,实例如下:function testA(){    alert('a');    alert('b');    alert('c');}testA(); 程序执行会依次弹出'a','b','c'. function testA(){    alert('a');    return;    alert('b');    alert('c');}testA(); 程序执行弹出'a'便会终止. 2.在函数中调用别的函数,在被调用函数终止的同时也希望调用的函数

  • javascript时区函数介绍

    js的时区函数: 设datename为创建的一个Date对象 ==================== datename.getTimezoneOffset() --取得当地时间和GMT时间(格林威治时间)的差值,返回值以分钟为单位 ==================== 举例:根据本地时间获得GMT时间和任意时区的时间 d=new Date(); //创建一个Date对象 localTime = d.getTime(); localOffset=d.getTimezoneOffset()*6

  • JavaScript极简入门教程(二):对象和函数

    阅读本文需要有其他语言的编程经验. JavaScript 中的简单类型包括: 1.数字 2.字符串 3.布尔(true 和 false) 4.null 5.undefined 此外的其他类型均是对象(我们不要被 typeof 操作符的返回值所迷惑),例如: 1.函数 2.数组 3.正则表达式 4.对象(对象自然也是对象) 对象基础 在 JavaScript 中,对象是属性的集合(对象为关联数组),每个属性包括: 1.属性名,必须为字符串 2.属性值,可以为除了 undefined 之外的任何值

  • JavaScript极简入门教程(三):数组

    阅读本文需要有其他语言的编程经验. 在 JavaScript 中数组是对象(而非线性分配的内存). 通过数组 literal 来创建数组: 复制代码 代码如下: var empty = []; var numbers = [     'zero', 'one', 'two', 'three', 'four',     'five', 'six', 'seven', 'eight', 'nine' ]; empty[1] // undefined numbers[1] // 'one' empty

  • JavaScript极简入门教程(一):基础篇

    阅读本文需要有其他语言的编程经验. 开始学习之前 大多数的编程语言都存在好的部分和差的部分.本文只讲述 JavaScript 中好的部分,这是因为: 1.仅仅学习好的部分能够缩短学习时间 2.编写的代码更加健壮 3.编写的代码更加易读 4.编写的代码更加易于维护 弱类型和强类型 通常来说,越早的修复错误,为之付出的代价就越小.强类型语言的编译器可以在编译时检查某些错误.而 JavaScript 是一门弱类型语言,其解释器无法检查类型错误,但实践表明: 1.强类型能够避免的错误并不是那些关键性错误

  • Pytorch学习笔记DCGAN极简入门教程

    目录 1.图片分类网络 2.图片生成网络 首先是图片分类网络: 重点是生成网络 每一个step分为三个步骤: 1.图片分类网络 这是一个二分类网络,可以是alxnet ,vgg,resnet任何一个,负责对图片进行二分类,区分图片是真实图片还是生成的图片 2.图片生成网络 输入是一个随机噪声,输出是一张图片,使用的是反卷积层 相信学过深度学习的都能写出这两个网络,当然如果你写不出来,没关系,有人替你写好了 首先是图片分类网络: 简单来说就是cnn+relu+sogmid,可以换成任何一个分类网络

  • Golang极简入门教程(二):方法和接口

    方法 在 Golang 中没有类,不过我们可以为结构体定义方法.我们看一个例子: 复制代码 代码如下: package main   import (     "fmt"     "math" )   type Vertex struct {     X, Y float64 }   // 结构体 Vertex 的方法 // 这里的方法接收者(method receiver)v 的类型为 *Vertex func (v *Vertex) Abs() float64

  • Nodejs极简入门教程(二):定时器

    setTimeout 和 clearTimeout 复制代码 代码如下: var obj = setTimeout(cb, ms); setTimeout 用于设置一个回调函数 cb,其在最少 ms 毫秒后被执行(并非在 ms 毫秒后马上执行).setTimeout 返回值可以作为 clearTimeout 的参数,clearTimeout 用于停止定时器,这样回调函数就不会被执行了. setInterval 和 clearInterval 复制代码 代码如下: var obj = setInt

  • Nodejs极简入门教程(三):进程

    Node 虽然自身存在多个线程,但是运行在 v8 上的 JavaScript 是单线程的.Node 的 child_process 模块用于创建子进程,我们可以通过子进程充分利用 CPU.范例: 复制代码 代码如下: var fork = require('child_process').fork; // 获取当前机器的 CPU 数量 var cpus = require('os').cpus(); for (var i = 0; i < cpus.length; i++) {     // 生

  • Nodejs极简入门教程(一):模块机制

    JavaScript 规范(ECMAScript)没有定义一套完善的能适用于大多数程序的标准库.CommonJS 提供了一套 JavaScript 标准库规范.Node 实现了 CommonJS 规范. 模块基础 在 Node 中,模块和文件是一一对应的.我们定义一个模块: 复制代码 代码如下: // circle.js var PI = Math.PI;   // 导出函数 area exports.area = function(r) {     return PI * r * r; }  

  • Golang极简入门教程(四):编写第一个项目

    workspace Golang 的代码必须放置在一个 workspace 中.一个 workspace 是一个目录,此目录中包含几个子目录: 1.src 目录.包含源文件,源文件被组织为包(一个目录一个包) 2.pkg 目录.包含包对象(package objects) 3.bin 目录.包含可执行的命令 包源文件(package source)被编译为包对象(package object),命令源文件(command source)被编译为可执行命令(command executable).

  • Golang极简入门教程(一):基本概念

    安装 Golang 在 http://golang.org/dl/ 可以下载到 Golang.安装文档:http://golang.org/doc/install. Hello Go 我们先创建一个文件 hello.go: 复制代码 代码如下: package main   import "fmt"   func main() {     fmt.Printf("hello Golang\n"); } 执行此程序: 复制代码 代码如下: go run hello.g

随机推荐