JavaScript 对象与函数

对象参考手册

• Array
• Boolean
• Date
• Math
• Number
• String
• RegExp
• Global

前言

在js中什么都是对象（包括函数）。

函数是用来实现具体功能的代码，用一种方式把他们组织起来，就是函数。

对象是有属性和方法的一个东西，在对象中的函数就变成了方法。

this

• 在方法中，this 指的是所有者对象
• 单独的情况下，this 指的是全局对象：在浏览器窗口中，全局对象是 [object Window]
• 在函数中，this 指的是全局对象：function myFunction() {return this;}
• 在函数中，严格模式下，this 是 undefined
• 在事件中，this 指的是接收事件的元素：<button onclick="this.style.display='none'">点击来删除我！</button>

全局作用域

不在任何函数内定义的变量就具有全局作用域。
实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上会被绑定到window的一个属性

局部作用域

由于JavaScript的局部变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量的：

function foo() {
    for (var i=0; i<100; i++) {
        ···
    }
    i += 100;     // 仍然可以引用变量i
}

为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：

function foo() {
    var sum = 0;
    for (let i=0; i<100; i++) {
        sum += i;
    }
    i += 1;    //错误，无法引用
}

解构赋值，直接对多个变量同时赋值

如果数组本身还有嵌套，也可以通过下面的形式进行解构赋值，注意嵌套层次和位置要保持一致：
    let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
    x; // 'hello'
    y; // 'JavaScript'
    z; // 'ES6'

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school',
    address: {
        city: 'Beijing',
        street: 'No.1 Road',
        zipcode: '100001'
    }
};
var {name, address: {city, zip}} = person;

对象定义

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 648,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

对象属性

objectName.property           // person.age
objectName["property"]       // person["age"]
objectName[expression]       // x = "age"; person[x]

对象 for...in 循环

for...in语句遍历对象的属性。

for (variable in object) {
    要执行的代码
}

对象方法

• 请使用如下语法创建对象方法：
  
  methodName : function() { 代码行 }
• 请通过如下语法来访问对象方法：
  
  objectName.methodName()
• 如果您访问 fullName 属性时没有使用 ()，则将返回函数定义：
  
  name = person.fullName;

原始数据类型

• 请使用对象字面量 {} 代替 new Object()。

• 请使用字符串字面量 "" 代替 new String()。

• 请使用数值字面量代替 Number()。

• 请使用布尔字面量代替 new Boolean()。

• 请使用数组字面量 [] 代替 new Array()。

• 请使用模式字面量代替 new RexExp()。

• 请使用函数表达式 () {} 代替 new Function()。

函数定义

function functionName(parameters) {
   要执行的代码
}

函数表达式，在变量中保存函数表达式之后，此变量可用作函数：

var x = function (a, b) {return a * b};

匿名的自调用函数

( function () { document.getElementById("demo").innerHTML = "Hello! I called myself"; } ) ();

箭头函数

不需要 function 关键字、return 关键字和花括号:

// ES5
var x = function(x, y) {
  return x * y;
}
// ES6
var x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

map

map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果：
function pow(x) {
    return x * x;
}

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow);     // [1, 4, 9, 16, 25, 36, 49, 64, 81]

filter

filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim();     // 注意：IE9以下的版本没有trim()方法
});    // ['A', 'B', 'C']

利用filter，可以巧妙地去除Array的重复元素：
var r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});
去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。

arguments 对象：arguments 对象包含函数调用时使用的参数数组

函数不会对参数值进行任何检查

如果调用参数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined。

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
    var i;
    var max = -Infinity;
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

函数 Call

通过 call()，您能够使用属于另一个对象的方法，调用 person 的 fullName 方法，并用于 person2：

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}

var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}

person.fullName.call(person1, "Seattle", "USA");

apply()方法与call()方法非常相似
Math.max.apply(null, [1,2,3]);     //也会返回 3
不同之处是：
    apply()把参数打包成Array再传入；
    call()把参数按顺序传入。
    Math.max.apply(null, [3, 5, 4]);     // 5
    Math.max.call(null, 3, 5, 4);     // 5