Javascript 基础-------this关键字

标签：web javascript this 关键字 作用域

话说很多同学在刚学Javascript的时候，总会遇到this这个关键字，而它在不同的场景里面，经常指向不同的对象，一下子很容易把初学者给绕晕了。其实理解了其原理，就很清晰的知道this指向了具体的哪个对象。

废话少说，直入主题！

this关键字一般有四种用法，总结如下表格

有了上面表格到总结，接下来我们来看每个到例子是怎么样到。

一  函数

var name =‘kk‘;
function test(){
    console.log(‘Hello, I am‘, this);
    console.log(‘name:‘, this.name);
}

test();

这其实是一个全局函数， 挂载在Window对象下面，作为Window对象的一个方法。所以我们可以直接通过函数名test()来调用，或者Window.test()来调用，这自然而然的this关键字指向了 Window对象。而name =‘kk‘是一个全局变量，相当于window.name = ‘kk‘;而调用这个test方法到父作用域是window对象。
output:

Hello, I am Window
name: kk

二 方法

var name = ‘kk‘;
var obj = {
    name : ‘dd‘,
    test: function(){    
        console.log(‘Hello, i am ‘, this.name);
 }}
 
 obj.test();
 name = ‘ff‘;
 var newtest = obj.test;
 newtest();

obj.test(); 执行了obj对象的方法，故在方法test指向时，this指向obj对象，当然输出应该是obj.nam，即dd。

var newtest = obj.test; 代表将obj的test方法赋给newtest对象，一个打印当前对象的名字的方法，那么newtest()，执行的时候应该搞清楚是在Window作用域下执行的，而不是代表在执行obj.test()方法。所以打印出window.name，而window.name被替换成最新的值 ‘ff‘。

output:
Hello, i am dd
Hello, i am ff

小坑：试着将var newtest = obj.test; newtest(); 换成var newtest = obj.test(); newtest(); 对比之下，就只是多了个()，但是结果又会怎么样呢？ var newtest = obj.test(); 因为多了个(), 会先将执行obj.test()；打印出Hello, i am dd, 但是由于test方法没有任何的return对象，所以newtest是undefined，接下来newtest()；对一个undefined再加上()去执行，肯定会怎么样？报错error呗。

三 构造函数
new 构造函数，一般使用new 和函数首字母大写，new出一个新对象。

function Test(name){    this.name = name;
}
var obj1= new Test(‘Tom‘);
var obj2 = obj1;
obj2.name = ‘Steve‘;
console.log(obj1.name);

new 出第一个对象Obj1赋值‘Tom‘，而又让Obj2指向Obj1，所以Obj1.name也可以通过obj2.name来更新。
output:

Steve

四 apply / call 应用

var test = function(){
console.log(this);
}
var obj = {name: ‘Tom‘};
test.apply(obj);

output:

Object{ name: ‘Tome‘} 即obj对象

apply / call的应用，跟bind有什么不同呢？test.bind(obj); 不会立即执行，需要var excutetest = test.bind(obj);  excutetest(); 来执行方法。

本文出自 “8129266” 博客，请务必保留此出处http://8139266.blog.51cto.com/8129266/1835766

Javascript 基础-------this关键字

标签：web javascript this 关键字 作用域

原文地址：http://8139266.blog.51cto.com/8129266/1835766