JS中this指针指向

1.this的作用
function identify() {
return this.name.toUpperCase();
}
function sayHello() {
var greeting = "Hello, I'm " + identify.call( this );
console.log( greeting );
}
var person1= {
name: "Kyle"
};
var person2= {
name: "Reader"
};
identify.call( person1); // KYLE
identify.call( person2); // READER
sayHello.call( person1); // Hello, I'm KYLE
sayHello.call( person2); // Hello, I'm READER
用来绑定对象,进行属性和方法的操作。

顺便说一句:
JS中不在乎你写成什么,而在于你把它看成什么。
个人认为:万物皆为对象。对象内部存在属性和方法。

2.只有4种方式改变this指向

2.1 默认绑定全局变量

这条规则是最常见的,也是默认的。当函数被单独定义和调用的时候,应用的规则就是绑定全局变量。如下: 
function fn() {
console.log( this.a );
}
var a = 2;
fn(); // 2 -- fn单独调用,this引用window

2.2 隐式绑定
 隐式调用的意思是,函数调用时拥有一个上下文对象,就好像这个函数是属于该对象的一样。
这里需要了解,函数内部的this指向调用该函数的对象。
例如:

 function fn() {
     console.log( this.a );
 }
 var obj = {
 a: 2,
 fn: fn
 };

obj.fn(); // 2 -- this引用obj。
 需要说明的一点是,最后一个调用该函数的对象是传到函数的上下文对象

function fn() {
console.log( this.a );
}
var obj2 = {
a: 42,
fn: fn
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.fn(); // 42 -- this引用的是obj2.
  还有一点要说明的是,失去隐式绑定的情况,如下:
function fn() {
console.log( this.a );
}
var obj = {
a: 2,
fn: fn
};
var bar = obj.fn; // 函数引用传递
var a = "全局"; // 定义全局变量
bar(); // "全局"
  如上,第8行虽然有隐式绑定,但是它执行的效果明显是把fn赋给bar。这样bar执行的时候,依然是默认绑定全局变量,所以输出结果如上。

2.3 显示绑定
  学过bind()\apply()\call()函数的都应该知道,它接收的第一个参数即是上下文对象并将其赋给this。看下面的例子:
function fn() {
console.log( this.a );
}
var obj = {
a: 2
};
fn.call( obj ); // 2
  如果我们传递第一个值为简单值,那么后台会自动转换为对应的封装对象。如果传递为null,那么结果就是在绑定默认全局变量,如:
function fn() {
console.log( this.a );
}
var obj = {
a: 2
};
var a = 10;
fn.call( null); // 10

其中call和apply作用相同,但是apply后面接伪数组[1,2,3],call后面接正规参数(a,b,c)或者数组[1,2,3]。
而bind在ES5中提出,用来解决apply和call没有解决的问题。将方法执行和this绑定分开。

2.4 new新对象绑定
  如果是一个构造函数,那么用new来调用,那么绑定的将是新创建的对象。如:
function fn(a) {
this.a = a;
}
var bar = new fn( 2 );
console.log( bar.a );// 2
  其实第四条和第三条是同样的。new的过程中,自动发生了call方法,进行了this的绑定。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,854评论 2 17
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,109评论 1 10
  • 一、JavaScript基础知识回顾 1.1 JavaScript 1.1.1 javascript是什么? Ja...
    福尔摩鸡阅读 1,343评论 0 7
  • 三、闭包和高阶函数 3.1 闭包 3.1.1 变量的作用域 所谓变量的作用域,就是变量的有效范围。通过作用域的划分...
    梁同学de自言自语阅读 1,494评论 0 6
  • 在一般人的感覺里,人生是向前進取的,退後是失敗的。 但是在佛教里,向前的人生是半個世界,退後的人生也是半個世界。 ...
    佛言禅语阅读 506评论 0 0