博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript中this
阅读量:6678 次
发布时间:2019-06-25

本文共 2177 字,大约阅读时间需要 7 分钟。

全局this

浏览器宿主的全局环境中,this指的是window对象。

<script type="text/javascript">

  console.log(this === window); //true

</script>

浏览器中在全局环境下,使用var声明变量其实就是赋值给thiswindow

<script type="text/javascript">

  var foo = "bar";

  console.log(this.foo); //logs "bar" console.log(window.foo); //logs "bar"

</script>

任何情况下,创建变量时没有使用var或者let(ECMAScript 6),也是在操作全局this

<script type="text/javascript">

  foo = "bar";

  function testThis() {

    foo = "foo";

  }

  console.log(this.foo); //logs "bar" testThis();

  console.log(this.foo); //logs "foo"

</script>

除了DOM的事件回调或者提供了执行上下文(后面会提到)的情况,函数正常被调用(不带new)时,里面的this指向的是全局作用域。

<script type="text/javascript">

foo = "bar";

  function testThis() {

    this.foo = "foo";

  }

  console.log(this.foo); //logs "bar"

  testThis();

  console.log(this.foo); //logs "foo"

</script>

 当用调用函数时使用了new关键字,此刻this指代一个新的上下文,不再指向全局this

<script type="text/javascript">

  foo = "bar";

  function testThis() {

  this.foo = "foo";

  }

  console.log(this.foo); //logs "bar"

  new testThis();

  console.log(this.foo); //logs "bar"

  console.log(new testThis().foo); //logs "foo"

  </script>

 

 

函数创建后其实以一个函数对象的形式存在着。

既然是对象,则自动获得了一个叫做prototype的属性,可以自由地对这个属性进行赋值。

当配合new关键字来调用一个函数创建实例后,此刻便能直接访问到原型身上的值。

function Thing() {

  console.log(this.foo);

}

  Thing.prototype.foo = "bar";

  var thing = new Thing(); //logs "bar"

  console.log(thing.foo); //logs "bar"

当通过new的方式创建了多个实例后,他们会共用一个原型。比如,每个实例的this.foo都返回相同的值,直到this.foo被重写。

function Thing() { }

Thing.prototype.foo = "bar";

Thing.prototype.logFoo = function () {

  console.log(this.foo);

}

Thing.prototype.setFoo =

function (newFoo) {

  this.foo = newFoo;

}

var thing1 = new Thing();

var thing2 = new Thing();

thing1.logFoo(); //logs "bar"

thing2.logFoo(); //logs "bar"

thing1.setFoo("foo");

thing1.logFoo(); //logs "foo";

thing2.logFoo(); //logs "bar";

thing2.foo = "foobar";

thing1.logFoo(); //logs "foo";

thing2.logFoo(); //logs "foobar";  

...或者不通过实例,直接操作函数的原型。

function Thing() { }

Thing.prototype.foo = "bar";

Thing.prototype.logFoo = function () { console.log(this.foo, Thing.prototype.foo); }

var thing = new Thing();

thing.foo = "foo"; thing.logFoo(); //logs "foo bar";

 

 

 

 

转载于:https://www.cnblogs.com/zhaoleigege/p/4775305.html

你可能感兴趣的文章
FileUtils工具类的使用
查看>>
VS2010 + WinDDK 搭建驱动开发环境(转)
查看>>
程序员找不女朋友的原因
查看>>
[摘录]第3章 终局谈判策略
查看>>
react-router中的路由钩子使用
查看>>
C#编程之“串口通讯多次接收”
查看>>
【python 文件操作】python 文件操作
查看>>
线程相关
查看>>
linux下svn服务器配置问题
查看>>
《自我介绍》
查看>>
【C语言】20-static和extern关键字2-对变量的作用
查看>>
使用mpvue开发github小程序总结
查看>>
用表格给表单定位
查看>>
Redis
查看>>
Intent-filter的介绍
查看>>
开博说明
查看>>
Scala方法定义,方法和函数的区别,将方法转换成函数
查看>>
Hbase 读写 原理
查看>>
详解JDBC驱动的四种类型
查看>>
第十一次作业
查看>>