[js高手之路]this知多少

APICloud 发布于2019-08-20 19:07 / 2693人阅读

摘要：关键字在中的变化非常的灵活，如果用的不好就非常恶心，用的好程序就非常的优雅，灵活，飘逸所以掌握的用法，是每一个前端工程师必知必会的而且这个也是一些大公司笔试中常见的考察项第一种多带带的，指向的是这个对象注当前的执行环境是所以指向了第二种全局函

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 + "
" + 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 + "
" + 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 
2

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

1 
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

混合云专线服务 spark实战高手之路 js中的this js里面的this js中的this机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85183.html

[js高手之路]原型对象(prototype)与原型链相关属性与方法详解

摘要：一，检测左侧的原型链上，是否存在右侧的原型我在之前的两篇文章高手之路构造函数的基本特性与优缺点高手之路一步步图解的原型对象原型链已经分享过了卫庄二如果隐式原型指向调用方法的对象原型那么这个方法就返回，如卫庄因为的隐式原型指向的都是，有朋友可一，instanceof： instanceof检测左侧的__proto__原型链上，是否存在右侧的prototype原型. 我在之前的两篇文章 ...

svtter 2019-08-20 19:02 评论0 收藏0
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车

摘要：发布者订阅者模式，是一种很常见的模式，比如一买卖房子生活中的买房，卖房，中介就构成了一个发布订阅者模式，买房的人，一般需要的是房源，价格，使用面积等信息，他充当了订阅者的角色中介拿到卖主的房源信息，根据手头上掌握的客户联系信息买房的人的手机发布者订阅者模式，是一种很常见的模式，比如: 一、买卖房子生活中的买房，卖房，中介就构成了一个发布订阅者模式，买房的人，一般需要的是房源，价格，...

fevin 2019-08-20 19:09 评论0 收藏0
设计模式（通往高手之路的必备技能）

摘要：设计模式的定义在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。从前由于使用的局限性，和做的应用相对简单，不被重视，就更谈不上设计模式的问题。 ‘从大处着眼，从小处着手’，以前对这句话一知半解，自从踏出校门走入社会，开始工作以来，有了越来越深的理解，偶有发现这句话用在程序开发中也有用，所以，近段时间开始尝试着分析jQuery源码，分析angularjs源码，学习设计模式。设...

paraller 2019-08-21 18:35 评论0 收藏0
[js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示

摘要：面向对象编程方式，对于初学者来说，会比较难懂要学会面向对象以及使用面向对象编程，理解对象的创建在内存中的表示，至关重要首先，我们来一段简单的对象创建代码卫庄卫庄上例，我们创建了两个对象和如果有多个类似对象，我们可以通过函数封装，这种函数封装 javascript面向对象编程方式，对于初学者来说，会比较难懂. 要学会面向对象以及使用面向对象编程，理解对象的创建在内存中的表示，至关重要. ...

binta 2019-08-20 18:56 评论0 收藏0
[js高手之路]javascript腾讯面试题学习封装一个简易的异步队列

摘要：这道的面试题，是这样的，页面上有一个按钮，一个，点击按钮的时候，每隔秒钟向的后面追加一个一共追加个，的内容从开始技术，首先我们用闭包封装一个创建元素的函数页面上的个元素点我代码点击按钮的时候，用回调函数嵌套方式，这里我加入个，就已经快受不了这道js的面试题，是这样的，页面上有一个按钮，一个ul，点击按钮的时候，每隔1秒钟向ul的后面追加一个li, 一共追加10个，li的内容从0开始技...

hzx 2019-08-21 16:23 评论0 收藏0