[js高手之路]this知多少

this关键字在javascript中的变化非常的灵活，如果用的不好就非常恶心，用的好,程序就非常的优雅，灵活，飘逸.所以掌握this的用法，是每一个前端工程师必知必会的.而且这个也是一些大公司笔试中常见的考察项.

第一种、单独的this，指向的是window这个对象

console.log( this ); //window

注：当前的执行环境是window, 所以this指向了window

第二种、全局函数中的this

1         function show(){
2             alert( this ); //window
3         }
4         show();

show()这样子调用，指向的是window

第三种、函数调用的时候，前面加上new关键字，也就是构造函数的调用方式

1     function show(){
2             alert( this ); //object
3         }
4         new show();

new show这样调用，函数中的this指向的是object

第四种、用call与apply的方式调用函数，这里面的this分两种情况

一般情况下，call与apply后面的第一个参数, 该参数是什么， this就指向什么
call与apply后面如果是undefined和null，this指向的是window

1         function show(){
2             alert( this ); //abc
3         }
4         show.call('abc'); //abc

1          function show(){
2             alert( this );
3         }
4         show.call( null ); //window
5         show.call( undefined ); //window
6         show.call( '' ); //''

1         function show( a, b ){
2             alert( this + '\n' + a + ',' + b ); //abc, ghostwu, 22
3         }
4         show.call( "abc", 'ghostwu', 22 );
5         show.apply( "abc", ['ghostwu', 22] );

1 function show( a, b ){
2             alert( this + '\n' + a + ',' + b );
3         }
4         show.call( "abc", 'ghostwu', 22 ); //abc, ghostwu, 22
5         show.apply( null, ['ghostwu', 22] ); //window, ghostwu, 22
6         show.apply( undefined, ['ghostwu', 22] );// window, ghostwu, 22

这里要稍微注意一下, call与apply后面的参数传递的区别： call是一个个把参数传递给函数的参数，而apply是把参数当做数组传递给函数的参数，数组第一项传递给函数的第一个参数，第二项传递给函数的第二个参数。。。以此类推

第五种、定时器中的this,指向的是window

1      setTimeout( function(){
2             alert( this ); //window
3         }, 500 );

第六种、元素绑定事件，事件触发后执行的函数中的this 指向的是当前的元素

1 <input type="button" value="点我">
2 <script>
3 document.querySelector("input").onclick = function(){
4 alert(this); //指向当前按钮
5 };
6 </script>

第七种、函数调用时如果绑定了bind, 那么函数中的this就指向了bind中绑定的东西

1 <input type="button" value="点我">
2 document.querySelector("input").addEventListener("click", function(){
3 alert(this); //window
4 }.bind(window));

如果没有通过bind改变this，那么this的指向就会跟第六种情况一样

第八种、对象中的方法：该方法被哪个对象调用，那么方法中的this就指向该对象

        var obj = {userName : "ghostwu",show : function(){return this.userName;}};alert( obj.show() ); //ghostwu

如果把对象的方法，赋给一个全局变量，然后再调用，那么this指向的就是window.

1         var obj = {
2             userName : "ghostwu",
3             show : function(){
4                 return this.userName;
5             }
6         };
7         var fn = obj.show;
8         var userName = 'hello';
9         alert( fn() );// hello, this指向window

学完之后，我们就来应用下，下面这道题是腾讯考察this的面试题，你都能做出来吗？

 1         var x = 20;
 2         var a = {
 3             x: 15,
 4             fn: function () {
 5                 var x = 30;
 6                 return function () {
 7                     return this.x;
 8                 };
 9             }
10         };
11         console.log(a.fn()); //function(){return this.x}
12         console.log((a.fn())()); //20
13         console.log(a.fn()()); //20
14         console.log(a.fn()() == (a.fn())()); //true
15         console.log(a.fn().call(this)); // 20
16         console.log(a.fn().call(a)); // 15

你如果真的搞懂了this，面向对象水平也不错的话，可以来试试，我的博客中这道腾讯的面试题额:

学生问的一道javascript面试题[来自腾讯]

[js高手之路]this知多少相关推荐

[js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色中介拿到卖主的房 ...
[js高手之路]打造通用的匀速运动框架
本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让他 ...
[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
[js高手之路]从原型链开始图解继承到组合继承的产生
于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 1 ...
[js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
[js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法
最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支 ...

[js高手之路]this知多少

学生问的一道javascript面试题[来自腾讯]

[js高手之路]this知多少相关推荐

最新文章

热门文章