您的位置:首页 > Web前端 > JavaScript

五分钟看懂js关键字this

2016-07-22 18:04 344 查看
this是js里面很常用的关键字,而灵活的js也赋予了这个关键字无穷的生命力,相信你也有被它糊弄的时候,我总结了一个6字原则,大部分场合都能清醒分辨this到底指向who,跟大家分享一下,欢迎指正。

[b]谁调用指向谁![/b]

首先介绍一个大boss: window, 他是一个隐形大侠,没有确定的调用者的时候,肯定是它出手, 也就是说,如果一个对象没有显性的调用者时,this指向的就是window。

先看下面的例子:

var x = 10;
var fruit = {
x: 20
};
fruit.slice = function(callback){
console.log("--- slice ---");
console.log(this.x);
console.log("--- callback begin---");
callback.call(this);
}

fruit.slice(function(){
console.log("--- callback output---");
console.log(this.x);

});


example 3
妥妥输出:

--- slice ---
20
--- callback begin---
--- callback output---
20

再强调一遍,6字原则在确定js关键字this是谁的问题上屡试不爽, 谁调用指向谁!言下之意,没有调用者就是隐形boss window

细心的看官也许会问, 第一个例子中的pear(), 既然里边的this指向window, 为什么不能在全局域中使用window.pear() or pear()呢?

Good question!

把这个问题用代码还原其实是这样:

var fruit = {};
fruit.banana = function(){
function pear(){}
}

// 这样调用会出错咯
pear();
// 这样调用也不行
window.pear();


这两种方式调用都有exception,因为pear()只能在banana里面assign给banana的变量,或者在banana内部调用。

这样调用是对的;

var fruit = {};
fruit.banana = function(){
this.callPear = pear; // assign 给callPear
function pear(){ console.log("I am pear!");}
   pear(); // 内部调用
}

var instant = new fruit.banana();
instant.callPear();


这涉及另外一个话题,作用域,scope!下次再跟大家详细分享scope。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: