javascript - 函数中 this 和 var 的区别

标签 javascript

我正在创建一个 javascript 类。此类具有私有(private)和公共(public)函数/属性。我对私有(private)和公共(public)的理解是,this 是公共(public)的,而 var 对于该函数及其成员来说是私有(private)的。但是,在本地函数 buildFramework() 中,当我调用 var settings.currentView 时,出现错误:

settings.currentView is not defined

我的问题是,在函数及其成员以及全局作用域中,thisvar 之间有什么区别?

namespace('example');
example.InstagramViewer = function (options) {
    // this works when called within buildFramework()
    this.settings = $.extend({
        currentView: 'grid'
    }, options);

    // this doesn't work when called within buildFramework()
    var settings = $.extend({
        currentView: 'grid'
    }, options);

    var viewer;

    this.init = function () {
        buildFramework();
    };

    var buildFramework = function() {
        viewer = $(viewerWrapper).append('<div id="instagramViewer" class="' + settings.currentView + '"></div>'); // this doesn't work
        viewer = $(viewerWrapper).append('<div id="instagramViewer" class="' + this.settings.currentView + '"></div>'); // this does work
    };
}

并这样称呼...

$(function () {
    var viewer = new connectionsAcademy.publicWebsite.web.js.teenWebsite.InstagramViewer();
    viewer.init();
});

最佳答案

这里有很多差异。

首先,“this”是一个关键字,它是对调用对象的引用。如果您按原样调用函数,则窗口将是调用对象,并且您将使用关键字“this”设置全局变量。

InstagramViewer();
console.log(window.settings);

但是,如果您通过另一个对象调用函数,window 将不再是调用对象,并且您将在该对象上设置成员变量,而不是设置全局变量。

var obj = {InstagramViewer: InstagramViewer};
obj.InstagramViewer();
console.log(obj.settings);

在这两种情况下使用“var”没有什么区别。 'var' 的工作方式与 'this' 不同,因为除了我们称之为函数暂存器的对象之外,它不影响任何对象。只有该函数可以访问其暂存器(除非您创建某种在此暂存器上公开变量的闭包)。这就是为什么您可以将使用“var”定义的变量视为私有(private)变量。

在处理“delete”时,使用“var”也不同于“this”。 “delete”不适用于用“var”声明的变量,但在“this”或任何其他对象上定义变量时则有效。

var F = function() {
    this.foo = 'foo';
    var bar = 'bar';

    delete(bar);
    delete(this.foo);

    alert(bar);
    alert(this.foo);
};


F();

我的解释很粗略,但这是一个大话题,在这种情况下不容易解释清楚。我强烈推荐您阅读这本书http://shop.oreilly.com/product/9780596000486.do 。特别是第 7 章。

关于javascript - 函数中 this 和 var 的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12377957/

相关文章:

javascript - javascript if 的多个操作

javascript - 等待 Node js中的事件

javascript - angularjs - 动态 ng 模型

javascript - Firebase 服务错误 : Port 5000 is not open. 无法启动功能模拟器

javascript - 根据规则获取文本值

javascript - 如何在jquery中为动态数据创建函数

javascript - CSS - 谁能帮我弄清楚我的下拉菜单导航哪里出了问题?

javascript - 在 3 个图像面板部分中悬停时展开和更改图像

javascript - 整个页面图库加载/调整大小技术

javascript - 如何在JS中装饰querySelector/querySelectorAll