JavaScript笔记（一）

1. 函数作用域

函数作用域的嵌套关系是定义时决定的，而不是调用时决定的，也就是说，JavaScript 的作用域是静态作用域，又叫词法作用域，这是因为作用域的嵌套关系可 以在语法分析时确定，而不必等到运行时确定

---

2. 全局对象

在 JavaScript 中有一种特殊的对象称为全局对象。这个对象在Node.js 对应的是 global 对象，在浏览器中对应的是 window 对象。由于全局对象的所有属性在任何地方都是可见的， 所以这个对象又称为 全局作用域。全局作用域中的变量不论在什么函数中都可以被直接引 用，而不必通过全局对象。 满足以下条件的变量属于全局作用域：

• 在最外层定义的变量
• 全局对象的属性
• 任何地方隐式定义的变量（未定义直接赋值的变量）
  

  ---

3. 闭包

闭包（closure）是函数式编程中的概念

当一个函数返回它内部定义的一个函数时，就产生了一个闭包， 闭包不但包括被返回的函数，还包括这个函数的定义环境

闭包有两个主要用途，一是实现嵌套的回调函数，二是隐藏对象的细节。

---

4. 实现私有成员

JavaScript 的对象没有私有属性，也就是说对象的每一个属性都是曝露给外部 的。这样可能会有安全隐患，譬如对象的使用者直接修改了某个属性，导致对象内部数据的一 致性受到破坏等。JavaScript通过约定在所有私有属性前加上下划线（例如_myPrivateProp），表示这个属性是私有的，外部对象不应该直接读写它，这个只是停留在约定层面，事实上这种方式很不好，私有成员的实现可以借助闭包实现

---

5. this

JavaScript 中没有类，但 JavaScript 是基于对象的语言

JavaScript中不存在单独的函数，所有的函数是要依附于对象的

在 JavaScript 中，上下文对象就是 this 指针，即被调用函数所处的环境。上下文对象 的作用是在一个函数内部引用调用它的对象本身，JavaScript 的任何函数都是被某个对象调 用的，包括全局对象，所以 this 指针是一个非常重要的东西，this 指针不属于某个函数，而 是函数调用时所属的对象

• call与apply

  在 JavaScript 中，call 和 apply 是两个神奇的方法，但同时也是容易令人迷惑的两个 方法，乃至许多对 JavaScript 有经验的人也不太清楚它们的用法。call 和 apply 的功能是 以不同的对象作为上下文来调用某个函数。简而言之，就是允许一个对象去调用另一个对象 的成员函数。

• bind方法

  • bind方法来永久地绑定函数的上下文

func 是待绑定函数，thisArg 是改变的上下文对象，arg1、arg2 是绑定的参 数表。bind 方法返回值是上下文为 thisArg 的 func。通过下面例子可以帮你理解 bind 的使用方法：

var someuser = {       name: 'byvoid',       func: function() {            console.log(this.name);     } };  var foo = {       name: 'foobar' }; foo.func = someuser.func; foo.func(); // 输出 foobar foo.func1 = someuser.func.bind(someuser); foo.func1(); // 输出 byvoid func = someuser.func.bind(foo);func(); // 输出 foobar func2 = func;func2(); // 输出 foobar

• bind绑定参数表

var person = {       name: 'byvoid',       says: function(act, obj) {             console.log(this.name + ' ' + act + ' ' + obj);       } }; person.says('loves', 'diovyb'); // 输出 byvoid loves diovyb byvoidLoves = person.says.bind(person, 'loves'); byvoidLoves('you'); // 输出 byvoid loves you

byvoidLoves 将 this 指针绑定到了 person，并将第一个参数绑定到 loves，之后在调用 byvoidLoves 的时候，只需传入第三个参数。这个特性可以用于创建 一个函数的“捷径”，之后我们可以通过这个“捷径”调用，以便在代码多处调用时省略重 复输入相同的参数。

• bind的理解
  尽管 bind 很优美，还是有一些令人迷惑的地方，例如下面的代码：

var someuser = {    name: 'byvoid',       func: function () {             console.log(this.name);       } }; var foo = {name: 'foobar' }; func = someuser.func.bind(foo); func(); // 输出 foobar func2 = func.bind(someuser);func2(); // 输出 foobar 

全局函数 func 通过someuser.func.bind将this指针绑定到了foo，调用func()输 出了foobar。我们试图将func2赋值为已绑定的func重新通过bind将this指针绑定到 someuser的结果，而调用func2时却发现输出值仍为foobar，即 this 指针还是停留在 foo 对象上，这是为什么呢？要想解释这个现象，我们必须了解 bind 方法的原理。 让我们看一个 bind 方法的简化版本（不支持绑定参数表）：

someuser.func.bind = function(self) {       return this.call(self); };  

假设上面函数是 someuser.func 的 bind 方法的实现，函数体内 this 指向的是someuser.func，因为函数也是对象，所以 this.call(self) 的作用就是以 self 作为 this指针调用 someuser.func。

//将func = someuser.func.bind(foo)展开：func = function() {     return someuser.func.call(foo);   }; //再将func2 = func.bind(someuser)展开： func2 = function() {     return func.call(someuser); }; 

从上面展开过程我们可以看出，func2 实际上是以 someuser 作为 func 的this指 针调用了 func，而 func 根本没有使用 this 指针，所以两次 bind 是没有效果的。

• 在上下文环境改变时，需要保存当前this（上下文环境）的例子

  _this保存的是外部函数中的this值，当点击事件发生的时候，点击事件里的处理函数中this代表的是触发该事件的元素本身，要修改的实例中的变量的时候，需要在change函数中保存change 中的this，已供在闭包中使用

  function Sup(){this.currentClick = 0;}Sup.prototype.change = function() {var _this = this;liEle.onclick = function() {  _this.currentClick = parseInt(this.getAttribute('id')) + 1; //点击  change(1);  document.getElementById('cityClick').innerHTML = this.textContent;}  }var sub = new Sup();sub.change();  //change函数中的this是sub这个实例

  ---

6. 原型

基于原型的语言中，原型可以理解成模板

构造函数与原型：

• 构造函数内定义的属性继承方法与原型不同，子对象需要显式调用父对象才能继承构造函数内定义的属性，也就是通过new之后，才可以调用构造函数中的方法（也就是实例方法）

• 构造函数中定义的任何属性，包括函数在内都还会被重复创建，同一个构造函数产生的两个对象不共享实例

• 构造函数内定义的函数有运行时闭包的开销，因为构造函数中的局部变量对其中定义的函数来说也是可见的

什么时候使用原型？什么时候使用构造函数内定义来创建属性？

• 除非必须要使用构造函数闭包，否则尽量用原型定义成员函数，因为这样可以减少开销
• 尽量在构造函数中定义一般变量，尤其是对象或者数组，因为用原型定义的成员时多个实例共享的

---

7. 原型链

JavaScript中存在两个特殊的对象：Object与Function，它们都是构造函数，用于生成对象，Object.prototype是所有对象的祖先，Function.prototype是所有函数的原型（包括构造函数）

JS中的对象分类：

• 用户创建的对象：一般意义上就是用new语句显式构造的对象
• 构造函数对象：指的普通的构造函数，即通过new调用的生成普通对象的对象

• 原型对象：特指的是构造函数prototype属性所指向的对象

  以上三类对象每一类中都有一个_ proto _属性，它指向该对象的原型，从任何对象沿着它都可以追溯到Object.prototype。构造函数对象有prototype属性，指向一个原型对象，通过该构造函数创建对象时，被创建对象的proto 属性会指向构造函数的prototype属性，原型对象有constructor属性，指向它对应的构造函数。

  对象的复制：所有对象类型的变量都是指向对象的引用，两个变量之间赋值传递一个对象并不会对这个对象进行复制，而只是传递引用。

• 对象浅拷贝——复制对象的所有（基本）属性，而共享对象类型的属性

  Object.prototype.clone = function() {  var newObj = {};  for(var item in this) {      newObj[item] = this[item];  }  return newObj;};var obj = {  name : "obj",  likes : ['js']};var newObj = obj.clone();newObj.likes.push('node');console.log(newObj.likes);  //[ 'js', 'node' ]console.log(obj.likes);     //[ 'js', 'node' ]

• 深拷贝（完全复制）

  Object.prototype.clone = function() {  var newObj = {};  for(var i in this) {      if(typeof(this[i]) == 'object' || typeof(this[i]) == 'function') {          newObj[i] = this[i].clone();      }else {          newObj[i] = this[i];      }  }  return newObj;};Array.prototype.clone = function() { var newObj = []; for(var i = 0; i < this.length; i++) {     if(typeof(this[i]) == 'object' || typeof(this[i]) == 'function') {         newObj[i] = this[i].clone();     }else {         newObj[i] = this[i];     } }  return newObj;};Function.prototype.clone = function() {  var that = this;  var newFunc = function() {      return that.apply(this, arguments);  };  for(var i in this) {      newFunc[i] = this[i];  }  return newFunc;};var obj = {  name : 'obj',  likes : ['js'],  display : function() {      console.log(this.name);  }};var newObj = obj.clone();newObj.likes.push('node');console.log(obj.likes);    //[ 'js' ]console.log(newObj.likes);  //[ 'js', 'node' ]console.log(newObj.display == obj.display);  //false