javascript中this的四种用法

   在javascript当中每一个function都是一个对象,所以在这个里var temp=this 指的是function当前的对象。this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

  this

  在函数执行时,this 总是指向调用该函数的对象。要判断 this 的指向,其实就是判断 this 所在的函数属于谁。

  在《javaScript语言精粹》这本书中,把 this 出现的场景分为四类,简单的说就是:

  有对象就指向调用对象

  没调用对象就指向全局对象

  用new构造就指向新对象

  通过 apply 或 call 或 bind 来改变 this 的所指。

  1) 函数有所属对象时:指向所属对象

  函数有所属对象时,通常通过 . 表达式调用,这时 this 自然指向所属对象。比如下面的例子:

  ?

1
2
3
4
5
6
7
8
9
10
11
12

var myObject = {value: 100};
myObject.getValue = function () {
console.log(this.value); // 输出 100
 
// 输出 { value: 100, getValue: [Function] },
// 其实就是 myObject 对象本身
console.log(this);
 
return this.value;
};
 
console.log(myObject.getValue()); // => 100

  getValue() 属于对象 myObject,并由 myOjbect 进行 . 调用,因此 this 指向对象 myObject。

  2) 函数没有所属对象:指向全局对象

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13

var myObject = {value: 100};
myObject.getValue = function () {
var foo = function () {
console.log(this.value) // => undefined
console.log(this);// 输出全局对象 global
};
 
foo();
 
return this.value;
};
 
console.log(myObject.getValue()); // => 100

  在上述代码块中,foo 函数虽然定义在 getValue 的函数体内,但实际上它既不属于 getValue 也不属于 myObject。foo 并没有被绑定在任何对象上,所以当调用时,它的 this 指针指向了全局对象 global。

  据说这是个设计错误。

  3) 构造器中的 this:指向新对象

  js 中,我们通过 new 关键词来调用构造函数,此时 this 会绑定在该新对象上。

  ?

1
2
3
4
5
6
7

var SomeClass = function(){
this.value = 100;
}
 
var myCreate = new SomeClass();
 
console.log(myCreate.value); // 输出100

  顺便说一句,在 js 中,构造函数、普通函数、对象方法、闭包,这四者没有明确界线。界线都在人的心中。

  4) apply 和 call 调用以及 bind 绑定:指向绑定的对象

  apply() 方法接受两个参数第一个是函数运行的作用域,另外一个是一个参数数组(arguments)。

  call() 方法第一个参数的意义与 apply() 方法相同,只是其他的参数需要一个个列举出来。

  简单来说,call 的方式更接近我们平时调用函数,而 apply 需要我们传递 Array 形式的数组给它。它们是可以互相转换的。

  ?

1
2
3
4
5
6
7
8
9
10
11
12

var myObject = {value: 100};
 
var foo = function(){
console.log(this);
};
 
foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }
 
var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

  以所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2024-08-03 07:39:25

javascript中this的四种用法的相关文章

javascript中this的四种用法_javascript技巧

this 在函数执行时,this 总是指向调用该函数的对象.要判断 this 的指向,其实就是判断 this 所在的函数属于谁. 在<javaScript语言精粹>这本书中,把 this 出现的场景分为四类,简单的说就是: 有对象就指向调用对象 没调用对象就指向全局对象 用new构造就指向新对象 通过 apply 或 call 或 bind 来改变 this 的所指. 1) 函数有所属对象时:指向所属对象 函数有所属对象时,通常通过 . 表达式调用,这时 this 自然指向所属对象.比如下面的

Javascript中call的两种用法实例

 这篇文章主要介绍了Javascript中call的两种用法实例,有需要的朋友可以参考一下 用法一(常见用法):   表现形式为:一个对象.方法.call(另一个对象),意义是用另一个对象代替当前对象,执行当前对象的方法.先看示例:  代码如下: function Class1(){     this.name = "class1";     this.showName = function(){         alert(this.name);     } } function C

详细分析Javascript中创建对象的四种方式_javascript技巧

前言 使用Javascript创建对象的方式有很多,现在就来列举一下其中的四种方式,并且罗列出了每种方式的优缺点,可以让大家进行选择使用,下面来看看. 工厂模式 function createPerson(name, age){ var obj = new Object(); obj.name = name; obj.age = age; return obj; //一定要返回,否则打印undefined:undefined } var person1 = new createPerson('Y

Javascript中call的两种用法实例_javascript技巧

用法一(常见用法): 表现形式为:一个对象.方法.call(另一个对象),意义是用另一个对象代替当前对象,执行当前对象的方法.先看示例: 复制代码 代码如下: function Class1(){    this.name = "class1";    this.showName = function(){        alert(this.name);    }}function Class2(){    this.name = "class2";}var c1

mysql中模糊查询的四种用法介绍_Mysql

下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] WHERE u_name LIKE '%三%' 将会把u_name为"张三","张猫三"."三脚猫","唐三藏"等等有"三"的记录全找出来. 另外,如果需要找出u_name中既有"三"又有

mysql中模糊查询的四种用法介绍

下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] WHERE u_name LIKE '%三%' 将会把u_name为"张三","张猫三"."三脚猫","唐三藏"等等有"三"的记录全找出来. 另外,如果需要找出u_name中既有"三"又有

JavaScript中this的四个绑定规则总结_javascript技巧

前言 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅.所以这篇文章开始将介绍javascript中this的四个绑定规则,下面来一起看看吧. 绑定规则 1. 默认绑定 独立函数调用时,this 指向全局对象,如果使用严格模式,那么全局对象无法使用默认绑定, this绑定至 undefined. function foo() { console.log(this.a); } var a = 2; foo(); // 2 严格模式时: function fo

js中继承的几种用法总结

 本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承   js中有三种继承方式   1.js原型(prototype)实现继承   代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>   <body>  

javascript中的self和this用法小结

 本篇文章主要是对javascript中的self和this用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 一. 起因  那天用到prototype.js于是打开看看,才看几行就满头雾水,原因是对js的面向对象不是很熟悉,于是百度+google了一把,最后终于算小有收获,写此纪念一下^_^.  prototype.js代码片段   代码如下: var Class = {      create: function() {          return function(