JS 回顾 3
约 7488 字大约 25 分钟
2026-01-29
面向对象
面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式，它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。
每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。
对象可以复用，通过继承机制还可以定制，因此，面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比起由一系列函数或指令组成的传统的过程式编程（procedural programming），更适合多人合作的大型软件项目。
（1）对象是单个实物的抽象。
一本书、一辆汽车、一个人都可以是对象，一个数据库、一个网页、一个远程服务器连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。
（2）对象是一个容器，封装了属性（property）和方法（method）。
属性是对象的状态，方法是对象的行为（完成某种任务）。比如，我们可以把动物抽象为 animal 对象，使用“属性”记录具体是哪一种动物，使用“方法”表示动物的某种行为（奔跑、捕猎、休息等等）。
构造函数
面向对象编程的第一步，就是要生成对象。前面说过，对象是单个实物的抽象。通常需要一个模板，表示某一类实物的共同特征，然后对象根据这个模板生成。
典型的面向对象编程语言（比如 C++ 和 Java），都有“类”（class）这个概念。所谓“类”就是对象的模板，对象就是“类”的实例。但是，JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。
JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。
构造函数就是一个普通的函数，但具有自己的特征和用法：
var Vehicle = function () {
this.price = 1000;
};Vehicle 就是构造函数。为了与普通函数区别，构造函数名字的第一个字母通常大写。
构造函数的特点有两个：
- 函数体内部使用了
this关键字，代表了所要生成的对象实例。 - 生成对象的时候，必须使用
new命令。
New 命令
new 命令的作用，就是执行构造函数，返回一个实例对象
var Vehicle = function () {
this.price = 1000;
};
var v = new Vehicle();
v.price // 1000为了保证构造函数必须与 new 命令一起使用，一个解决办法是，构造函数内部使用严格模式，即第一行加上 use strict。这样的话，一旦忘了使用 new 命令，直接调用构造函数就会报错。
function Fubar(foo, bar){
'use strict';
this._foo = foo;
this._bar = bar;
}
Fubar()
// TypeError: Cannot set property '_foo' of undefined上面代码的 Fubar 为构造函数，use strict 命令保证了该函数在严格模式下运行。
由于严格模式中，函数内部的 this 不能指向全局对象，默认等于 undefined，导致不加 new 调用会报错（JavaScript 不允许对 undefined 添加属性）。
另一个解决办法，构造函数内部判断是否使用 new 命令，如果发现没有使用，则直接返回一个实例对象：
function Cat(name, age, color) {
if (!(this instanceof Cat)) {
console.warn("Cat must be called with new keyword");
return new Cat(name, age, color);
}
this.name = name;
this.age = age;
this.color = color;
this.meow = function () {
console.log(`${this.name} says Meow!`);
}
}
const Whiskers1 = Cat("Whiskers", 3, "Tabby");
// Cat must be called with new keyword
const whiskers2 = new Cat("Whiskers", 3, "Tabby");
whiskers2.meow(); // Whiskers says Meow!原理
使用 new 命令时，它后面的函数依次执行下面的步骤。
- 创建一个空对象，作为将要返回的对象实例。
- 将这个空对象的原型，指向构造函数的
prototype属性。 - 将这个空对象赋值给函数内部的
this关键字。 - 开始执行构造函数内部的代码。
也就是说，构造函数内部，this 指的是一个新生成的空对象，所有针对 this 的操作，都会发生在这个空对象上。构造函数之所以叫“构造函数”，就是说这个函数的目的，就是操作一个空对象（即 this 对象），将其“构造”为需要的样子。
如果构造函数内部有 return 语句，而且 return 后面跟着一个对象，new 命令会返回 return 语句指定的对象；否则，就会不管 return 语句，返回 this 对象。
var Vehicle = function () {
this.price = 1000;
return 1000;
};
(new Vehicle()) === 1000
// false上面代码中，构造函数 Vehicle 的 return 语句返回一个数值。这时，new 命令就会忽略这个 return 语句，返回“构造”后的 this 对象。
但是，如果 return 语句返回的是一个跟 this 无关的新对象，new 命令会返回这个新对象，而不是 this 对象。这一点需要特别引起注意。
var Vehicle = function (){
this.price = 1000;
return { price: 2000 };
};
(new Vehicle()).price
// 2000上面代码中，构造函数 Vehicle 的 return 语句，返回的是一个新对象。new 命令会返回这个对象，而不是 this 对象。
另一方面，如果对普通函数（内部没有 this 关键字的函数）使用 new 命令，则会返回一个空对象。
function getMessage() {
return 'this is a message';
}
var msg = new getMessage();
msg // {}
typeof msg // "object"上面代码中，getMessage 是一个普通函数，返回一个字符串。对它使用 new 命令，会得到一个空对象。
这是因为 new 命令总是返回一个对象，要么是实例对象，要么是 return 语句指定的对象。本例中，return 语句返回的是字符串，所以 new 命令就忽略了该语句。
new 命令简化的内部流程，可以用下面的代码表示：
function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ params) {
// 将 arguments 对象转为数组
var args = [].slice.call(arguments);
// 取出构造函数
var constructor = args.shift();
// 创建一个空对象，继承构造函数的 prototype 属性
var context = Object.create(constructor.prototype);
// 执行构造函数
var result = constructor.apply(context, args);
// 如果返回结果是对象，就直接返回，否则返回 context 对象
return (typeof result === 'object' && result != null) ? result : context;
}
// 实例
var actor = _new(Person, '张三', 28);函数内部可以使用 new.target 属性，如果当前函数是 new 命令调用，new.target 指向当前函数，否则为 undefined。
function f() {
console.log(new.target === f);
}
f() // false
new f() // true使用这个属性，可以判断函数调用的时候，是否使用 new 命令：
function f() {
if (!new.target) {
throw new Error('请使用 new 命令调用！');
}
// ...
}
f() // Uncaught Error: 请使用 new 命令调用！创建实例对象
构造函数作为模板，可以生成实例对象。但是，有时拿不到构造函数，只能拿到一个现有的对象。我们希望以这个现有的对象作为模板，生成新的实例对象，这时就可以使用 Object.create() 方法。
var person1 = {
name: '张三',
age: 38,
greeting: function() {
console.log('Hi! I\'m ' + this.name + '.');
}
};
var person2 = Object.create(person1);
person2.name // 张三
person2.greeting() // Hi! I'm 张三.对象 person1 是 person2 的模板，后者继承了前者的属性和方法。
this
this 关键字是一个非常重要的语法点
this 可以用在构造函数之中，表示实例对象。除此之外，this 还可以用在别的场合。但不管是什么场合，this 都有一个共同点：它总是返回一个对象。
简单说，this 就是属性或方法“当前”所在的对象。
比如 this.property， this 就代表 property 属性当前所在的对象。
var person = {
name: '张三',
describe: function () {
return '姓名：'+ this.name;
}
};
person.describe()
// "姓名：张三"上面代码中，this.name 表示 name 属性所在的那个对象。由于 this.name 是在 describe 方法中调用，而 describe 方法所在的当前对象是 person，因此 this 指向 person，this.name 就是 person.name。
由于对象的属性可以赋给另一个对象，所以属性所在的当前对象是可变的，即 this 的指向是可变的。
var A = {
name: '张三',
describe: function () {
return '姓名：'+ this.name;
}
};
var B = {
name: '李四'
};
B.describe = A.describe;
B.describe()
// "姓名：李四"上面代码中，A.describe 属性被赋给 B，于是 B.describe 就表示 describe 方法所在的当前对象是 B，所以 this.name 就指向 B.name。
function f() {
return '姓名：'+ this.name;
}
var A = {
name: '张三',
describe: f
};
var B = {
name: '李四',
describe: f
};
A.describe() // "姓名：张三"
B.describe() // "姓名：李四"函数 f 内部使用了 this 关键字，随着 f 所在的对象不同，this 的指向也不同。
只要函数被赋给另一个变量，this 的指向就会变。
var A = {
name: '张三',
describe: function () {
return '姓名：'+ this.name;
}
};
var name = '李四';
var f = A.describe;
f() // "姓名：李四"A.describe 被赋值给变量 f，内部的 this 就会指向 f 运行时所在的对象（本例是顶层对象）。
<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">
<script>
function validate(obj, lowval, hival){
if ((obj.value < lowval) || (obj.value > hival))
console.log('Invalid Value!');
}
</script>上面代码是一个文本输入框，每当用户输入一个值，就会调用 onChange 回调函数，验证这个值是否在指定范围。浏览器会向回调函数传入当前对象，因此 this 就代表传入当前对象（即文本框），然后就可以从 this.value 上面读到用户的输入值。
总结一下，JavaScript 语言之中，一切皆对象，运行环境也是对象，所以函数都是在某个对象之中运行，this 就是函数运行时所在的对象（环境）。
这本来并不会让用户糊涂，但是 JavaScript 支持运行环境动态切换，也就是说，this 的指向是动态的，没有办法事先确定到底指向哪个对象。
实质
JavaScript 语言之所以有 this 的设计，跟内存里面的数据结构有关系。
var obj = { foo: 5 };上面的代码将一个对象赋值给变量 obj。
JavaScript 引擎会先在内存里面，生成一个对象 { foo: 5 }，然后把这个对象的内存地址赋值给变量 obj。
也就是说，变量 obj 是一个地址（reference），后面如果要读取 obj.foo，引擎先从 obj 拿到内存地址，然后再从该地址读出原始的对象，返回它的 foo 属性。
原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，上面例子的 foo 属性，实际上是以下面的形式保存的。
{
foo: {
[[value]]: 5
[[writable]]: true
[[enumerable]]: true
[[configurable]]: true
}
}foo 属性的值保存在属性描述对象的 value 属性里面。
这样的结构是很清晰的，问题在于属性的值可能是一个函数。
var obj = { foo: function () {} };这时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给 foo 属性的 value 属性。
{
foo: {
[[value]]: 函数的地址
...
}
}由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。
var f = function () {};
var obj = { f: f };
// 单独执行
f()
// obj 环境执行
obj.f()JavaScript 允许在函数体内部，引用当前环境的其他变量。
var f = function () {
console.log(x);
};函数体里面使用了变量 x。该变量由运行环境提供。
现在问题就来了，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。
所以，this 就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。
var f = function () {
console.log(this.x);
}函数体里面的 this.x 就是指当前运行环境的 x。
var f = function () {
console.log(this.x);
}
var x = 1;
var obj = {
f: f,
x: 2,
};
// 单独执行
f() // 1
// obj 环境执行
obj.f() // 2函数 f 在全局环境执行，this.x 指向全局环境的 x；在 obj 环境执行，this.x 指向 obj.x。
使用场合
this 主要有以下几个使用场合。
（1）全局环境
全局环境使用 this，它指的就是顶层对象 window。
this === window // true
function f() {
console.log(this === window);
}
f() // true不管是不是在函数内部，只要是在全局环境下运行，this 就是指顶层对象 window。
（2）构造函数
构造函数中的 this，指的是实例对象。
var Obj = function (p) {
this.p = p;
};上面代码定义了一个构造函数 Obj，由于 this 指向实例对象，所以在构造函数内部定义 this.p，就相当于定义实例对象有一个 p 属性。
var o = new Obj('Hello World!');
o.p // "Hello World!"（3）对象的方法
如果对象的方法里面包含 this，this 的指向就是方法运行时所在的对象，该方法赋值给另一个对象，就会改变 this 的指向。
但是，这条规则很不容易把握：
var obj ={
foo: function () {
console.log(this);
}
};
obj.foo() // objobj.foo 方法执行时，它内部的 this 指向 obj。
下面这几种用法，都会改变 this 的指向。
// 情况一
(obj.foo = obj.foo)() // window
// 情况二
(false || obj.foo)() // window
// 情况三
(1, obj.foo)() // window上面代码中，obj.foo 就是一个值。这个值真正调用的时候，运行环境已经不是 obj 了，而是全局环境，所以 this 不再指向 obj。
可以这样理解，JavaScript 引擎内部，obj 和 obj.foo 储存在两个内存地址，称为地址一和地址二。
obj.foo() 这样调用时，是从地址一调用地址二，因此地址二的运行环境是地址一，this 指向 obj。
但是，上面三种情况，都是直接取出地址二进行调用，这样的话，运行环境就是全局环境，因此 this 指向全局环境。上面三种情况等同于下面的代码。
// 情况一
(obj.foo = function () {
console.log(this);
})()
// 等同于
(function () {
console.log(this);
})()
// 情况二
(false || function () {
console.log(this);
})()
// 情况三
(1, function () {
console.log(this);
})()如果 this 所在的方法不在对象的第一层，这时 this 只是指向当前一层的对象，而不会继承更上面的层。
var a = {
p: 'Hello',
b: {
m: function() {
console.log(this.p);
}
}
};
a.b.m() // undefineda.b.m 方法在 a 对象的第二层，该方法内部的 this 不是指向 a，而是指向 a.b，因为实际执行的是下面的代码。
var b = {
m: function() {
console.log(this.p);
}
};
var a = {
p: 'Hello',
b: b
};
(a.b).m() // 等同于 b.m()如果要达到预期效果，只有写成下面这样。
var a = {
b: {
m: function() {
console.log(this.p);
},
p: 'Hello'
}
};如果这时将嵌套对象内部的方法赋值给一个变量，this 依然会指向全局对象。
var a = {
b: {
m: function() {
console.log(this.p);
},
p: 'Hello'
}
};
var hello = a.b.m;
hello() // undefined上面代码中，m 是多层对象内部的一个方法。
为求简便，将其赋值给 hello 变量，结果调用时，this 指向了顶层对象，为了避免这个问题，可以只将 m 所在的对象赋值给 hello，这样调用时，this 的指向就不会变。
var hello = a.b;
hello.m() // Hello注意点
避免多层 this
由于 this 的指向是不确定的，所以切勿在函数中包含多层的 this
var o = {
f1: function () {
console.log(this);
var f2 = function () {
console.log(this);
}();
}
}
o.f1()
// Object
// Window上面代码包含两层 this，结果运行后，第一层指向对象 o，第二层指向全局对象，因为实际执行的是下面的代码。
var temp = function () {
console.log(this);
};
var o = {
f1: function () {
console.log(this);
var f2 = temp();
}
}一个解决方法是在第二层改用一个指向外层 this 的变量。
var o = {
f1: function() {
console.log(this);
var that = this;
var f2 = function() {
console.log(that);
}();
}
}
o.f1()
// Object
// Object上面代码定义了变量 that，固定指向外层的 this，然后在内层使用 that，就不会发生 this 指向的改变。
事实上，使用一个变量固定 this 的值，然后内层函数调用这个变量，是非常常见的做法，请务必掌握。
JavaScript 提供了严格模式，也可以硬性避免这种问题。严格模式下，如果函数内部的 this 指向顶层对象，就会报错。
var counter = {
count: 0
};
counter.inc = function () {
'use strict';
this.count++
};
var f = counter.inc;
f()
// TypeError: Cannot read property 'count' of undefined上面代码中，inc 方法通过 'use strict' 声明采用严格模式，这时内部的 this 一旦指向顶层对象，就会报错。
避免数组处理方法中的 this
数组的 map 和 foreach 方法，允许提供一个函数作为参数，这个函数内部应该谨慎使用 this。
var o = {
v: 'hello',
p: [ 'a1', 'a2' ],
f: function f() {
this.p.forEach(function (item) {
console.log(this.v + ' ' + item);
});
}
}
o.f()
// undefined a1
// undefined a2foreach 方法的回调函数中的 this，其实是指向 window 对象，因此取不到 o.v 的值，实际上 o.f() 调用的是：
[ 'a1', 'a2' ].forEach(function (item) { console.log(this.v + ' ' + item); });（1）用箭头函数（最常用）：箭头函数不绑定自己的 this，会“继承外层的 this”（这里外层是 o.f()，所以是 o）
f: function () {
this.p.forEach((item) => {
console.log(this.v + ' ' + item);
});
}（2）forEach 的第二个参数传 thisArg：forEach(callback, thisArg) 会把回调里的 this 设成你传的对象
f: function () {
this.p.forEach(function (item) {
console.log(this.v + ' ' + item);
}, this);
}（3）先存一下 this（老派但有效）
f: function () {
var self = this;
this.p.forEach(function (item) {
console.log(self.v + ' ' + item);
});
}避免回调函数中的 this
回调函数中的 this 往往会改变指向，最好避免使用。
var o = new Object();
o.f = function () {
console.log(this === o);
}
document.querySelector('#button').addEventListener('click', o.f);上面代码中，点击按钮以后，控制台会显示 false。
原因是此时 this 不再指向 o 对象，而是指向按钮的 DOM 对象，因为 f 方法是在按钮对象的环境中被调用的。
真正决定 this 的，是“调用点”，而不是“函数最初挂在哪个对象上”，document.querySelector('#button').addEventListener('click', o.f); 并没有在这一刻执行 o.f()，你只是把 函数引用 交给了 addEventListener，o.f 只是一个“函数值”（指针/引用），等点击发生时，是 浏览器的事件系统 在调用它，调用形式等价于：
o.f.call(buttonElement, event)事件回调的 this = 监听器绑定的那个元素（currentTarget），在普通 function 回调下成立；箭头函数会不一样，因为它根本不绑定自己的 this。
o.f()：这是“调用”。调用点是o，所以this === o。o.f：这只是把函数 取出来（函数引用/地址/值）。此时并没有this这回事，this要等“被调用那一刻”才决定。
把 o.f 交给了 addEventListener，等点击发生时，是浏览器用“事件回调的规则”去调用它，所以 this 变成了按钮元素（event.currentTarget）。
const g = o.f; // 只是取引用
g(); // 普通调用：this -> 全局/undefined(严格)这种细微的差别，很容易在编程中忽视，导致难以察觉的错误。
绑定
this 的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。
有时，需要把 this 固定下来，避免出现意想不到的情况。JavaScript 提供了 call、apply、bind 这三个方法，来切换/固定 this 的指向。
Function.prototype.call()
函数实例的 call 方法，可以指定函数内部 this 的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。
var obj = {};
var f = function () {
return this;
};
f() === window // true
f.call(obj) === obj // truecall 方法的参数，应该是一个对象，如果参数为空、null 和 undefined，则默认传入全局对象。
如果 call 方法的参数是一个原始值，那么这个原始值会自动转成对应的包装对象，然后传入 call 方法。
call 方法还可以接受多个参数：
func.call(thisValue, arg1, arg2, ...)call 的第一个参数就是 this 所要指向的那个对象，后面的参数则是函数调用时所需的参数。
function add(a, b) {
return a + b;
}
add.call(this, 1, 2) // 3call 方法的一个应用是调用对象的原生方法。
var obj = {};
obj.hasOwnProperty('toString') // false
// 覆盖掉继承的 hasOwnProperty 方法
obj.hasOwnProperty = function () {
return true;
};
obj.hasOwnProperty('toString') // true
Object.prototype.hasOwnProperty.call(obj, 'toString') // false上面代码中，hasOwnProperty 是 obj 对象继承的方法，如果这个方法一旦被覆盖，就不会得到正确结果。
call 方法可以解决这个问题，它将 hasOwnProperty 方法的原始定义放到 obj 对象上执行，这样无论 obj 上有没有同名方法，都不会影响结果。
Function.prototype.apply()
apply 方法的作用与 call 方法类似，也是改变 this 指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数，使用格式如下。
func.apply(thisValue, [arg1, arg2, ...])apply 方法的第一个参数也是 this 所要指向的那个对象，如果设为 null 或 undefined，则等同于指定全局对象。
第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数。
原函数的参数，在 call 方法中必须一个个添加，但是在 apply 方法中，必须以数组形式添加。
function f(x, y){
console.log(x + y);
}
f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2有趣的应用：
（1）找出数组最大元素
JavaScript 不提供找出数组最大元素的函数，结合使用 apply 方法和 Math.max 方法，就可以返回数组的最大元素。
var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15（2）将数组的空元素变为 undefined
通过 apply 方法，利用 Array 构造函数将数组的空元素变成 undefined。
Array.apply(null, ['a', ,'b'])
// [ 'a', undefined, 'b' ]或者用这些都行
Array(...['a', ,'b']) // ['a', undefined, 'b']
Array.from(['a', ,'b']) // ['a', undefined, 'b']（也会把 hole 变成 undefined）空位变成 undefined”主要是 apply（更准确说是 Function.prototype.apply 的参数展开机制）在做参数列表时发生的，不是 Array 自己凭空把 hole 变成了 undefined。
Array.apply(null, ['a', ,'b']) 等价于“把第二个参数这个数组，当作参数列表，一个个塞进 Array(...)”：Array('a', ?, 'b')，apply 需要把 ['a', ,'b'] 变成一串参数，所以它会做类似这样的事：
let args = ['a', , 'b']; // length = 3，有个 hole
let a0 = args[0]; // 'a'
let a1 = args[1]; // 这里是 hole -> 读出来是 undefined
let a2 = args[2]; // 'b'
Array(a0, a1, a2);在 JS 里，数组的 hole 本质是：这个索引根本没有属性。
let args = ['a', , 'b'];
0 in args // true
1 in args // false <-- 这个位置根本不存在
2 in args // true但当用 args[1] 去“读”它时，规则是：
如果这个属性不存在 → 结果就是 undefined，所以 hole 在“读取”那一刻就表现为 undefined。
注意：这不等于 hole 被改成了 undefined，只是“读的时候拿到 undefined”。
apply 把刚才读出来的值 undefined 当成了“第 2 个参数”传进 Array：Array('a', undefined, 'b')
空元素与 undefined 的差别在于，数组的 forEach 方法会跳过空元素，但是不会跳过 undefined。因此，遍历内部元素的时候，会得到不同的结果。
（3）转换类似数组的对象
另外，利用数组对象的 slice 方法，可以将一个类似数组的对象（比如 arguments 对象）转为真正的数组。
Array.prototype.slice.apply({0: 1, length: 1}) // [1]
Array.prototype.slice.apply({0: 1}) // []
Array.prototype.slice.apply({0: 1, length: 2}) // [1, undefined]
Array.prototype.slice.apply({length: 1}) // [undefined]上面代码的 apply 方法的参数都是对象，但是返回结果都是数组，这就起到了将对象转成数组的目的。
从上面代码可以看到，这个方法起作用的前提是，被处理的对象必须有 length 属性，以及相对应的数字键。
（4）绑定回调函数的对象
前面的按钮点击事件的例子，可以改写如下
var obj = new Object();
var func = function () {
console.log(this === obj);
}
var handler = function (){
func.apply(obj);
// 或者 func.call(obj);
};
document.querySelector('#button').addEventListener('click', handler);上面代码中，点击按钮以后，控制台将会显示 true。
由于 apply() 方法（或者 call() 方法）不仅绑定函数执行时所在的对象，还会立即执行函数，因此不得不把绑定语句写在一个函数体内。
Function.prototype.bind()
bind() 方法用于将函数体内的 this 绑定到某个对象，然后返回一个新函数。
var d = new Date();
d.getTime() // 1481869925657
var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.上面代码中，将 d.getTime() 方法赋给变量 print，然后调用 print() 就报错了。
这是因为 getTime() 方法内部的 this，绑定 Date 对象的实例，赋给变量 print 以后，内部的 this 已经不指向 Date 对象的实例了。
bind() 方法可以解决这个问题。
var print = d.getTime.bind(d);
print() // 1481869925657上面代码中，bind() 方法将 getTime() 方法内部的 this 绑定到 d 对象，这时就可以安全地将这个方法赋值给其他变量了。
bind 方法的参数就是所要绑定 this 的对象
var counter = {
count: 0,
inc: function () {
this.count++;
}
};
var func = counter.inc.bind(counter);
func();
counter.count // 1counter.inc() 方法被赋值给变量 func。这时必须用 bind() 方法将 inc() 内部的 this，绑定到 counter，否则就会出错。
this 绑定到其他对象也是可以的。
var counter = {
count: 0,
inc: function () {
this.count++;
}
};
var obj = {
count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101bind() 还可以接受更多的参数，将这些参数绑定原函数的参数。
var add = function (x, y) {
return x * this.m + y * this.n;
}
var obj = {
m: 2,
n: 2
};
var newAdd = add.bind(obj, 5);
newAdd(5) // 20上面代码中，bind() 方法除了绑定 this 对象，还将 add() 函数的第一个参数 x 绑定成 5，然后返回一个新函数 newAdd()，这个函数只要再接受一个参数 y 就能运行了。
如果 bind() 方法的第一个参数是 null 或 undefined，等于将 this 绑定到全局对象，函数运行时 this 指向顶层对象（浏览器为 window）。
function add(x, y) {
return x + y;
}
var plus5 = add.bind(null, 5);
plus5(10) // 15上面代码中，函数 add() 内部并没有 this，使用 bind() 方法的主要目的是绑定参数 x，以后每次运行新函数 plus5()，就只需要提供另一个参数 y 就够了。
而且因为 add() 内部没有 this，所以 bind() 的第一个参数是 null。
注意点
（1）每一次返回一个新函数
bind() 方法每运行一次，就返回一个新函数，这会产生一些问题，比如，监听事件的时候，不能写成下面这样。
element.addEventListener('click', o.m.bind(o));上面代码中，click 事件绑定 bind() 方法生成的一个匿名函数，这样会导致无法取消绑定，所以下面的代码是无效的。
element.removeEventListener('click', o.m.bind(o));正确的方法是写成下面这样：
var listener = o.m.bind(o);
element.addEventListener('click', listener);
// ...
element.removeEventListener('click', listener);（2）结合回调函数使用
回调函数是 JavaScript 最常用的模式之一，但是一个常见的错误是，将包含 this 的方法直接当作回调函数。解决方法就是使用 bind() 方法，将 counter.inc() 绑定 counter。
var counter = {
count: 0,
inc: function () {
'use strict';
this.count++;
}
};
function callIt(callback) {
callback();
}
callIt(counter.inc.bind(counter));
counter.count // 1callIt() 方法会调用回调函数，这时如果直接把 counter.inc 传入，调用时 counter.inc() 内部的 this 就会指向全局对象。
使用 bind() 方法将 counter.inc 绑定 counter 以后，就不会有这个问题，this 总是指向 counter。
还有一种情况比较隐蔽，就是某些数组方法可以接受一个函数当作参数。这些函数内部的 this 指向，很可能也会出错。
var obj = {
name: '张三',
times: [1, 2, 3],
print: function () {
this.times.forEach(function (n) {
console.log(this.name);
});
}
};
obj.print()
// 没有任何输出obj.print 内部 this.times 的 this 是指向 obj 的，这个没有问题。但是，forEach() 方法的回调函数内部的 this.name 却是指向全局对象，导致没有办法取到值：
[1, 2, 3].forEach(function (n) { console.log(this.name); });解决这个问题，也是通过 bind() 方法绑定 this。
obj.print = function () {
this.times.forEach(function (n) {
console.log(this.name);
}.bind(this));
};
obj.print()
// 张三
// 张三
// 张三（3）结合 call() 方法使用
利用 bind() 方法，可以改写一些 JavaScript 原生方法的使用形式，以数组的 slice() 方法为例。
[1, 2, 3].slice(0, 1) // [1]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 1) // [1]上面的代码中，数组的 slice 方法从 [1, 2, 3] 里面，按照指定的开始位置和结束位置，切分出另一个数组。
这样做的本质是在 [1, 2, 3] 上面调用 Array.prototype.slice() 方法，因此可以用 call 方法表达这个过程，得到同样的结果。
call() 方法实质上是调用 Function.prototype.call() 方法，因此上面的表达式可以用 bind() 方法改写。
var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1) // [1]上面代码的含义就是，将 Array.prototype.slice 变成 Function.prototype.call 方法所在的对象，调用时就变成了 Array.prototype.slice.call。类似的写法还可以用于其他数组方法。
var push = Function.prototype.call.bind(Array.prototype.push);
var pop = Function.prototype.call.bind(Array.prototype.pop);
var a = [1 ,2 ,3];
push(a, 4)
a // [1, 2, 3, 4]
pop(a)
a // [1, 2, 3]如果再进一步，将 Function.prototype.call 方法绑定到 Function.prototype.bind 对象，就意味着 bind 的调用形式也可以被改写。
function f() {
console.log(this.v);
}
var o = { v: 123 };
var bind = Function.prototype.call.bind(Function.prototype.bind);
bind(f, o)() // 123上面代码的含义就是，将 Function.prototype.bind 方法绑定在 Function.prototype.call 上面，所以 bind 方法就可以直接使用，不需要在函数实例上使用。