怎样理解this

Posted aisowe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎样理解this相关的知识,希望对你有一定的参考价值。

javascript里的this, Python里的self, 其实都是一个东西, 它的存在跟构造函数 / 类这种是分不开的, 当然, 也可以在其他场合下使用, 他的意义很多, 但最共通的一个特点是: this/self 总是返回一个对象.

至于返回的这个对象到底是什么, 其实就是我们需要去发掘的. 

 

1. this的指向是动态的, 下面在test()中返回的this.name, 这里的this指代的是具体的环境, 如果在obj1里面则返回"李雷", 如果在obj2里面则返回"韩梅梅", 如果在全局作用域内, 那就会在全局作用域下去找name这个属性, 因此返回"李强".

function test(){
    return this.name;
};

var obj1 = {
    name: "李雷",
    getName: test
};

var obj2 = {
    name: "韩梅梅",
    getName: test
};

var name = "李强";

obj1.getName(); // "李雷"
obj2.getName(); // "韩梅梅"
test(); // "李强"

 

2. 构造函数中的this会在new时将待实例的空对象赋值给this, 这个操作实际上是将this指向了一个空对象, 用于从构造函数中拷贝属性和方法

function Person(name){
    this.name = name;
}

var lilei = new Person("李雷");
lilei.name; // "李雷"

 

3. 在网络编程中, this指代的是所在的元素节点, 比如下面例子中的this就是指代的input这个元素节点. 注意这个DOM节点也是一个对象, this指代了他自身

<body>
  <input type="text" id="inputNumber" onblur="test(this, 10)">
  <script>
    function test(el, num){
      if (el.value>num) alert("大了");
      if (el.value<num) alert("小了");
      if (el.value==num) alert("正确!");
    }
  </script>
</body>

 

理解this其实只需要理解一句话就好: this指代的是当前属性或方法所在的对象, 它是动态的.

以上是关于怎样理解this的主要内容,如果未能解决你的问题,请参考以下文章

为啥片段类应该是公开的?

很实用的JQuery代码片段(转)

laravel特殊功能代码片段集合

vue2.0 代码功能片段

怎样理解构造函数中的return语句

在 webview_flutter 中启用捏合和缩放,在哪里添加代码片段 [this.webView.getSettings().setBuiltInZoomControls(true);]