五分钟看懂js关键字this
2016-07-22 18:04
344 查看
this是js里面很常用的关键字,而灵活的js也赋予了这个关键字无穷的生命力,相信你也有被它糊弄的时候,我总结了一个6字原则,大部分场合都能清醒分辨this到底指向who,跟大家分享一下,欢迎指正。
[b]谁调用指向谁![/b]
首先介绍一个大boss: window, 他是一个隐形大侠,没有确定的调用者的时候,肯定是它出手, 也就是说,如果一个对象没有显性的调用者时,this指向的就是window。
先看下面的例子:
example 3
妥妥输出:
--- slice ---
20
--- callback begin---
--- callback output---
20
再强调一遍,6字原则在确定js关键字this是谁的问题上屡试不爽, 谁调用指向谁!言下之意,没有调用者就是隐形boss window。
细心的看官也许会问, 第一个例子中的pear(), 既然里边的this指向window, 为什么不能在全局域中使用window.pear() or pear()呢?
Good question!
把这个问题用代码还原其实是这样:
这两种方式调用都有exception,因为pear()只能在banana里面assign给banana的变量,或者在banana内部调用。
这样调用是对的;
这涉及另外一个话题,作用域,scope!下次再跟大家详细分享scope。
[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。
相关文章推荐
- com.google.gson.JsonSyntaxException: com.google.gson.stream.MalformedJsonException: Use JsonReader.s
- jsp设置网页根目录
- JS获取当前使用的浏览器名字以及版本号
- js中join()与 split()的对比
- jsp整合discuz
- bzoj 1015: [JSOI2008]星球大战starwar 并查集+离线处理
- javascript上传预览图片(IE8支持)
- Javascript 多线程?
- Javascript模拟多线程
- 浏览器对js中nextSibling与previousSibling属性的支持
- 全局变量的产生
- JSP九大内置对象及四个作用域(一)
- json 数据 添加 删除 排序
- js判断对象是否为空
- 事件监听函数,跨浏览器使用
- JSP 最佳实践: 用 jsp:include 控制动态内容
- 9张思维导图学习Javascript(转)
- json 和jsonp
- jsonp 自己写的一个例子
- 几个关于jsp的问题