JavaScript笔记（一）

最新推荐文章于 2025-05-28 08:00:00 发布

Dear_Mr

最新推荐文章于 2025-05-28 08:00:00 发布

阅读量525

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 对象闭包 this 作用域

本文链接：https://blog.youkuaiyun.com/Dear_Mr/article/details/70038573

JavaScript 专栏收录该内容

34 篇文章

订阅专栏

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