深入理解JavaScript中的作用域和上下文

在本教程中,我们将深入学习 JavaScript 中作用域(Scope)的一切。 所以,来吧。

介绍

JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,我会尽我所能用最简单的方式来解释作用域。理解作用域将使你的代码脱颖而出,减少错误,并帮助您使用它强大的设计模式。

什么是作用域(Scope)?

作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的可见性。

为什么说作用域是最小访问原则?

那么,为什么要限制变量的可见性呢,为什么你的变量不是在代码的任何地方都可用呢?一个优点是作用域为您的代码提供了一定程度的安全性。计算机安全的一个常见原则是用户应该一次只能访问他们需要的东西。 继续阅读

10道典型的JavaScript面试题

在IT界中,JavaScript开发人员的需求量一直居高不下。如果你的能力能够胜任这一角色,那么你有很多机会换一家公司,并提高薪水。但在你被一家公司聘用之前,你必须展示你的技能,以通过面试环节。在本文中,我将向您展示10个 JavaScript 技能典型问题以及其相关解决方案,来面试前端工程师。它们很有意思! 继续阅读

JavaScript 中的 call 和 apply

JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。简单的说就是改变函数执行的上下文,这是最基本的用法。两个方法基本区别在于传参不同。

  • call(obj,arg1,arg2,arg3);call第一个参数传对象,可以是null。参数以逗号分开进行传值,参数可以是任何类型。
  • apply(obj,[arg1,arg2,arg3]);apply第一个参数传对象,参数可以是数组或者arguments 对象。

这两个方法通常被用来类的继承和回调函数:

作用一、类的继承:

先来看这个例子:

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.alertName = function () {
        alert(this.name);
    }
    this.alertAge = function () {
        alert(this.age);
    }
}

function webDever(name, age, sex) {
    Person.call(this, name, age);
    this.sex = sex;
    this.alertSex = function () {
        alert(this.sex);
    }
}

var test = new webDever("愚人码头", 28, "男");
test.alertName();//愚人码头
test.alertAge();//28
test.alertSex();//男

这样 webDever类就继承Person类,Person.call(this,name,age) 的 意思就是使用 Person构造函数(也是函数)在this对象下执行,那么 webDever就有了Person的所有属性和方法,test对象就能够直接调用Person的方法以及属性了; 09年的理解解非常粗浅,呵呵。http://www.css88.com/archives/1692

作用二、回调函数:

call 和 apply在回调行数中也非常有用,很多时候我们在开发过程中需要对改变回调函数的执行上下文,最常用的比如ajax或者定时什么的,一般情况下,Ajax都是全局的,也就是window对象下的,来看这个例子:

 

function Album(id, title, owner_id) {
    this.id = id;
    this.name = title;
    this.owner_id = owner_id;
}

Album.prototype.get_owner = function (callback) {
    var self = this;
    $.get('/owners/' + this.owner_id, function (data) {
        callback && callback.call(self, data.name);
    });

};
var album = new Album(1, '生活', 2);
album.get_owner(function (owner) {
    alert('The album' + this.name + ' belongs to ' + owner);
});

这里

 

album.get_owner(function (owner) {
    alert('The album' + this.name + ' belongs to ' + owner);
});

中的 this.name就能直接取到album对象中的name属性了。