前端js -- this指向总结。

Wuv1Up 发布于2019-08-22 16:03 / 2408人阅读

摘要：面向对象编程指向一。总结的值要等到代码真正执行是才能确定。，调用，只想我们指定的对象后续更新。对象调用，如执行，指向。默认的，指向全局变量。特殊虽然也是对象，但是在这里还是指向那个函数的实例，因为比较特殊。

          面向对象编程 --- this指向

一。首先：,

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。

二。例如：

var obj = {
   a : 1,
   b : function() { 
       console.log(this.a) 
   }
}

当 obj.b()时，会输出1；
当 var fun = obj.b; fun() 时，会输出undefined。

三。原因：
1.obj.b()这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o。
2.

var fun = obj.b;
fun();

相当于，

var b = function(){ 
   console.log(this.a)
};
obj = {
   a:1,
   b:b
};
var fun = obj.b;
fun();

虽然fun是obj.b的一个引用，但是实际上，他引用的是b函数本身，因此此时的fun()其实是一个不带任何修饰的函数调用，只是在将fn赋值给变量j的时候并没有执行所以最终指向的是window。

四。总结： this的值要等到代码真正执行是才能确定。
同时，this的值有如下几种情况：
1.new调用时指的是被构造的对象。（

function Fn(){
   this.user = "猫咪"
}; 
var a = new Fn(); 
consle.log(a.user); //猫咪

这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向，将这个this指向对象a，为什么我说a是对象，因为用了new关键字就是创建一个对象实例，我们这里用变量a创建了一个Fn的实例[相当于复制了一份Fn到对象a里面]，此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象a中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份。）
2.call，apply调用，只想我们指定的对象(后续更新)。
3.对象调用，如执行obj.b()，this指向obj。
4.默认的，指向全局变量window。

特殊：构造函数版this， 当this碰到return时。

举例：

(1).

function fn()  { 
     this.user = "金毛"; 
     return {};
 }; 
 var a = new fn;  
 console.log(a.user); //undefined

(2).

function fn()  {   
    this.user = "金毛";    
    return function(){};
}; 
var a = new fn;  
console.log(a.user); //undefined

(3).

function fn()  {  
    this.user = "金毛";   
    return 1;
}; 
var a = new fn;  
console.log(a.user); //金毛

(4).

function fn()  {  
    this.user = "金毛";  
    return undefined;
}; 
var a = new fn;  
console.log(a.user); //金毛

2.总结：如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

3.特殊：虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

function fn()  {  
    this.user = "金毛";  
    return null;
}; 
var a = new fn;   
console.log(a.user); //金毛

云服务器 GPU云服务器改变this指向 this的指向 js中的this js里面的this

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

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

JS题目总结:原型链/new/json/MVC/Promise

摘要：数据管理，包括数据逻辑数据请求数据存储等功能。负责处理的事件，并更新也负责监听的变化，并更新，控制其他的所有流程。上面代码就是一个最简单的类，构造函数创建出来的对象自身有属性，其原型上面有一个属性。 JS题目总结:原型链/new/json/MVC/Promise 1原型链相关 showImg(https://segmentfault.com/img/remote/14600000161...

biaoxiaoduan 2019-08-26 12:18 评论0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言，然而，近几年，函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此，...

cfanr 2019-08-20 16:33 评论0 收藏0
2018年蚂蚁金服前端一面总结（面向2019届学生）

摘要：在这次蚂蚁金服的电话面试里面认识到了自己很多不足的地方吧。把字符串分割为字符串数组。从起始索引号提取字符串中指定数目的字符。通常消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。先简短的介绍一下我自己吧，我是一个前端学习者，虽然我基础知识也学了比较好，但是许久不用的知识就像流失的水，很容易就忘。在这次蚂蚁金服的电话面试里面认识到了自己很多不足的地方吧。虽然在阿里内推后的人才...

VEIGHTZ 2019-08-22 15:11 评论0 收藏0
2018年蚂蚁金服前端一面总结（面向2019届学生）

摘要：在这次蚂蚁金服的电话面试里面认识到了自己很多不足的地方吧。把字符串分割为字符串数组。从起始索引号提取字符串中指定数目的字符。通常消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。先简短的介绍一下我自己吧，我是一个前端学习者，虽然我基础知识也学了比较好，但是许久不用的知识就像流失的水，很容易就忘。在这次蚂蚁金服的电话面试里面认识到了自己很多不足的地方吧。虽然在阿里内推后的人才...

RobinQu 2019-08-01 18:40 评论0 收藏0
面试官问：JS的this指向

摘要：之前写过一篇文章面试官问能否模拟实现的和方法就是利用对象上的函数指向这个对象，来模拟实现和的。虽然实际使用时不会显示返回，但面试官会问到。非严格模式下，和，指向全局对象前言面试官出很多考题，基本都会变着方式来考察this指向，看候选人对JS基础知识是否扎实。读者可以先拉到底部看总结，再谷歌（或各技术平台）搜索几篇类似文章，看笔者写的文章和别人有什么不同（欢迎在评论区评论不同之处），...

warnerwu 2019-08-23 14:17 评论0 收藏0