JavaScript习惯用法的基础是什么:var self = this?

2020/09/30 15:21 · javascript ·  · 0评论

我在WebKit HTML 5 SQL Storage Notes Demo的源代码中看到了以下内容

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

笔者采用自我在一些地方(函数体)及在其他地方(的函数方法的参数列表中定义的机构)。这是怎么回事?现在,我已经注意到它了,我会开始到处看到它吗?

请参阅alistapart.com上的这篇文章(编辑:自最初链接以来,该文章已更新)

selfthis即使上下文在变化,也用于维护对原始文档的引用这是事件处理程序中经常使用的一种技术(尤其是在闭包中)。

编辑:请注意,self现在不鼓励使用,window.self如果您不小心的话,有可能导致错误。

您所说的变量并不重要。var that = this;很好,但是名称没有任何魔术。

在上下文中声明的函数(例如,回调,闭包)将有权访问在相同范围或更高范围中声明的变量/函数。

例如,一个简单的事件回调:

function MyConstructor(options) {
  let that = this;

  this.someprop = options.someprop || 'defaultprop';

  document.addEventListener('click', (event) => {
    alert(that.someprop);
  });
}

new MyConstructor({
  someprop: "Hello World"
});

我认为不应再以这种方式使用变量名“ self”,因为现代浏览器提供了一个指向普通窗口或WebWorker全局对象的全局变量self

为了避免造成混乱和潜在的冲突,您可以写var thiz = this改写var that = this

是的,您到处都会看到它。经常that = this;

看看self事件调用的函数内部如何使用?这些将有自己的背景,所以self被用来装this即进入了Note()

self即使函数只能在Note()函数完成执行后才能执行,其原因仍然对它们可用,原因内部函数由于closure而获得了外部函数的上下文

还应该注意的是,this如果您不喜欢var self = this惯用语,则可以使用另一种代理模式来维护对回调中原始对象的引用

由于可以使用function.apply在给定上下文function.call中调用函数,因此您可以编写一个包装器,该包装器返回使用applycall使用给定上下文调用函数的函数有关proxy此模式的实现,请参见jQuery函数。这是一个使用它的示例:

var wrappedFunc = $.proxy(this.myFunc, this);

wrappedFunc可以被调用,并将您的版本this作为上下文。

正如其他人所解释的那样,var self = this;允许闭包中的代码引用回父作用域。

但是,现在是2018年,所有主要的Web浏览器都广泛支持ES6。这个var self = this;习语并不像以前那么重要。

现在可以var self = this;通过使用箭头功能来避免

在本该使用的情况下var self = this

function test() {
    var self = this;
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", function() {
        console.log(self.hello); // logs "world"
    });
};

现在,我们可以使用没有var self = this以下内容的箭头功能

function test() {
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", () => {
        console.log(this.hello); // logs "world"
    });
};

箭头函数没有自己的功能,this而仅假设其包含范围。

该变量由方法中定义的内联函数捕获。this该函数中将引用另一个对象。这样,您可以使函数this在外部范围中保留对的引用

这是一个JavaScript怪癖。当函数是对象的属性(更恰当地称为方法)时,是指对象。在事件处理程序的示例中,包含对象是触发事件的元素。当调用的标准功能,将涉及到全局对象。如示例中所示,当您具有嵌套函数时,根本与外部函数的上下文无关。内部函数做的含功能共享范围,因此开发人员使用的变化var that = this,以保持,他们在内部功能的需要。

实际上self是对window(window.self的引用,因此当您说var self = 'something'要覆盖对自身的window引用时-因为self存在于window对象中。

这就是为什么大多数开发人员更喜欢var that = thisvar self = this;

无论如何; var that = this;与良好做法不符...假设您的代码稍后将被其他开发人员修改/修改,那么您应该使用与开发人员社区有关的最常见的编程标准

因此,您应该使用类似var oldThis/ var oThis/ etc的东西-要在您的范围内保持清晰// ..不是那么多,但可以节省几秒钟和几个大脑周期

正如上面多次提到的,“自我”只是在进入功能之前被用来保持对“ this”的引用。在函数中,“ this”一词指的是其他东西。

function Person(firstname, lastname) {
  this.firstname = firstname;

  this.lastname = lastname;
  this.getfullname = function () {
    return `${this.firstname}   ${this.lastname}`;
  };

  let that = this;
  this.sayHi = function() {
    console.log(`i am this , ${this.firstname}`);
    console.log(`i am that , ${that.firstname}`);
  };
}

let thisss = new Person('thatbetty', 'thatzhao');

let thatt = {firstname: 'thisbetty', lastname: 'thiszhao'};

thisss.sayHi.call(thatt);

本文地址:http://javascript.askforanswer.com/javascriptxiguanyongfadejichushishenmevar-self-this.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!