【阅读笔记】你不知道的JavaScript--this与对象2

this

默认绑定

默认绑定适配 独立函数调用
默认绑定 this 指向全局对象；
故直接调用函数，该函数内部的 this 即指向全局对象；

以上情况针对的是非严格模式下，而严格模式下的 this 默认绑定为 undefined

function foo() {
  console.log(this.a);
}
var a = 2;
foo(); // 2

隐式绑定

隐式绑定格式： xxx.func() 或者 xxx.xxx.func()
无论 func()前面有多少个对象，func 的 this 指向永远是离他最近的一个对象
譬如下方代码， obj1.obj2.foo() 中 foo()的 this 就指向 obj2

function foo() {}
var obj2 = {
  a: 42,
  foo: foo,
};
var obj1 = {
  a: 2,
  obj2: obj2,
};
obj1.obj2.foo(); // 42

隐式丢失

使用函数别名套娃太多次就会造成隐式丢失现象！
如下方代码，bar 中的 foo 是直接使用了函数别名，而不是调用 foo()
最终我们使用 bar()造成了隐式丢失，在非严格模式下取得了全局对象；

可以这么理解
bar()相当于 (obj.foo)() 而不是我们想象的 obj.foo()，故前者遵照我们的默认绑定原则，必然会指向全局对象了！

function foo() {}
var obj = {
  a: 2,
  foo: foo,
};
var bar = obj.foo;
var a = 100;
bar(); // 100

显示绑定

即使用 call apply bind 进行绑定，人为指定上下文 this
如下方代码，对 foo.call 人为将 this 指向对象 obj，故调用函数 foo 后，是出结果为 2

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
};
foo.call(obj);

硬绑定：即一旦对一个对象使用 call 或者其他函数绑定后，无论后续怎么修改都不会改变原来绑定的对象；
apply 和 call 作用一致，好好看代码，理清逻辑关系！！！

function foo(sth) {
  console.log(this.a + sth);
  return this.a + sth;
}
var obj = {
  a: 2,
};
var bar = function () {
  return foo.apply(obj, arguments);
};
var b = bar(3); //2 3
console.log(b); //5

API 调用上下文

一个很抽象的例子，使用了结构赋值的方法

function foo(el) {
  console.log(el, this.id);
}
var obj = {
  id: "hello",
};
[(1, 2, 3)].forEach(foo, obj); // 1hello 2hello 3hello

new 绑定

经典面试题：当我们使用 new 时，发生了什么？

1. 创建（或者说构造）一个全新的对象。
2. 这个新对象会被执行 [[Prototype]] 连接。
3. 这个新对象会绑定到函数调用的 this。
4. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。

下面就是一个很简单的构造函数例子；
构造函数内部使用 this 直接指向其内部的 constructor 存储区，那么后续调用 bar.a 的时候，就是取出 constructor 存储区的内容，而非原型对象的内容

function foo(a) {
  this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2

this 绑定优先级

柯里化(currying) -> 参考 bind 硬绑定
指把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术

绑定优先级： 硬绑定 > new 绑定 > 隐式绑定 > 默认绑定

其余绑定例外

当你使用 call 进行绑定的时候传入的是一个 null 或者 undefined，那么就自动使用默认绑定规则替代；
foo.call(null)

DMZ 非军事化区；
即将 this 绑定到一个空的费委托对象 DMZ 上去，不会对程序产生任何影响

function foo(a, b) {
  console.log(a + b);
}
var dmz = Object.create(null);
foo.apply(dmz, [2, 3]);
var bar = foo.bind(dmz, 2);
bar(3); // 2 3

对象

字面量与对象

var 创建字面量而非对象，而仅有对象才可以使用诸如长度访问、文字操作等方法；
而引擎会自动把 var 声明的字面量自动转换成对象，而无需显式构造：

var str = "helloworld"; // 字面量
console.log(str.length);

俩特例：
null 和 undefined 没有对应的构造形式，它们只有文字形式；
Date 只有构造，没有文字形式；

现在有两个取对象中属性的写法：
obj['name'] 或者 obj[0]
事实上，引擎都会先把下标转换成字符串类型然后才取，且对象中的属性名最终都会变成字符串类型
故存在 obj[0]===obj['0']

属性描述符

ES5 新增，为对象内的所有属性都配备属性描述符，使用 getOwnPropertyDescriptor 获取它们

var obj = {
  a: 2,
};

console.log(Object.getOwnPropertyDescriptor(obj, "a"));
// { value: 2, writable: true, enumerable: true, configurable: true }

或者使用 defineProperty 人工定义属性描述符

Object.defineProperty(obj, "a", {
  value: 10,
  writable: true,
  configurable: true,
  enumerable: true,
});

属性简介
writable 决定是否可以修改属性的值
Configurable 只要属性是可配置的
enumerable 属性可否被枚举

几个常用的属性描述符操作
Object.preventExtensions 禁用为对象添加新属性
Object.seal 对象不能添加属性，亦无法重新配置或删除任何属性
Object.freeze 在 seal 基础上设置 writable:false

Object.preventExtensions(obj);
Object.seal(obj);
Object.freeze(obj);

迭代器遍历

使用内置的 @@iterator 来遍历数组
ES6 中的符号 Symbol.iterator 来获取对象的 @@iterator 内部属性

var arr = [1, 2, 3];
var it = arr[Symbol.iterator]();

it.next(); // {value:1,done:false}
it.next();