JavaScript中this的指向问题!

另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为。

在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 this 值(在网页的全局上下文中调用函数时, this 指向 windows)。来看下面的例子:

 window.color = 'red';

        let person = {
name: 'lvhang',
age: 23,
color: 'pink'
} function sayColor() {
console.log(this.color);
} function sayColor2() {
console.log(this.color === window.color);
} sayColor(); // red
sayColor2(); // true person.sayColor = sayColor;
person.sayColor(); // pink

定义在全局上下文中的函数 sayColor()引用了 this 对象。这个 this 到底引用哪个对象必须到函数被调用时才能确定。因此这个值在代码执行的过程中可能会变。

如果在全局上下文中调用sayColor(),这结果会输出"red",因为 this 指向 window,而 this.color 相当于 window.color。

而在把 sayColor()赋值给 person 之后再调用 person.sayColor(), this 会指向 person,即 this.color 相当于

person.color,所以会显示"blue"。

在构造函数中this 指向的是我们的对象实例

   function Singer(name, gender) {
this.name = name;
this.age = age;
}
var xiaoshi = new Singer('小时姑娘!');
// 1 在构造函数中, 里面的this指向的是对象实例 xiaoshi

2 原型对象里面的this指向的是谁呢?!

    // 只有你调用的时候才能确定指向的是谁!
      var that;
Singer.prototype.sing = function() {
console.log('我唱歌很好听, 你听听看!');
that = this;
}
var xiaoshi = new Singer('小时姑娘!');

// 一般情况下this指向的是我们的调用者!

// 也就是我们的对象实例!xiaoshi

前端面试之JavaScript中this的指向【待完善!】的更多相关文章

  1. 前端面试之JavaScript中数组的方法!【残缺版!!】

    前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...

  2. 前端面试之JavaScript中的闭包!

    前端面试之JavaScript中的闭包! 闭包 闭包( closure )指有权访问另一个函数作用域中变量的函数. ----- JavaScript 高级程序设计 闭包其实可以理解为是一个函数 简单理 ...

  3. javascript中this的指向

    作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...

  4. 前端面试之ES6中的继承!

    前端面试之ES6中的继承! ES6之前并没有给我们提供 extends继承.我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承. 1 call() 两个作用: 1 调用这个函数! 2 修改函数 ...

  5. 前端开发:Javascript中的数组,常用方法解析

    前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...

  6. Javascript中的this指向。

    一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...

  7. JavaScript中 this 的指向

    很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...

  8. 前端面试之JavaScript的基本数据类型!

    前端面试之JavaScript的基本数据类型! JS的基本数据类型 数字 字符串 布尔值 JavaScript中有两个特殊的原始值: null (空) 和undefined (未定义), , 它们不是 ...

  9. 面试题-浅谈JavaScript中的This指向问题

    各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方. 1.基本概念 MDN的官方解释:与其他语言 ...

随机推荐

  1. 不一样的资产安全 3D 可视化平台

    前言   数字经济时代,应用好数据是企业数字化转型的关键,基于前沿科学技术进行数据的有效管控,更是对数字增值服务的新趋势.近年来,整个安全行业对资产管理的重视程度正在提高.据IDC发布的相关数据显示, ...

  2. Redis入门指导

    前言 本文提供全网最完整的Redis入门指导教程,下面我们从下载Redis安装包开始,一步一步的学习使用. 下载Redis 官网提供的Redis安装包是服务于Linux的,而我们需要在Window下使 ...

  3. H3C路由器配置——动态路由RIP协议

    一.静态路由的不足 静态路由适用于:小规模的网络.架构不怎么调整的网络.没有环路的网络 二.RIP协议工作过程 2.1.工作特点 n路由信息协议RIP(Routing Information Prot ...

  4. 技术基础 | 用JSON在抖音上发布动态——使用Stargate即可轻松实现

    Cassandra是世界上经受住最多实战考验的数据库,通过其快速且易于使用的数据API,让你的程序开发升级. 本文将介绍什么是Stargate以及Stargate的最新进展,如果您想快速浏览相关代码和 ...

  5. Python-对比参考目录查找多个文件夹中不同的文件

    改完文件名称后,Dr.he 发现分别保存5个状态的jpg 文件的文件夹出现缺少文件的情况.为了让他少熬夜查找缺失文件,结合网友分享的脚本,写了查找以下代码,满足他的需求,也以防自己忘记.以下代码能解决 ...

  6. [leetcode]Q133Clone Graph

    克隆图记住:一个map一个queue,照葫芦画瓢BFS 找到一个节点就画一个对应的新的,用map对应,然后添加邻居,记录邻居到queue public UndirectedGraphNode clon ...

  7. 编写通用的Makefile

    一个应用程序的形成是少不了一下几个步骤的. 1. 预处理 #检查语法错误.包含头文件.展开#if.#define等宏定义 2. 编译 #把.c文件转换为汇编文件.s 3. 汇编 #把.s汇编转换为机器 ...

  8. 微信小程序-页面下拉

    微信小程序当滑动到最顶部和最底部时,继续下拉,会将整个页面拉下去或者拉上去,本来以为是客户端自有的特性,就没去管他,直到我的禅道出现了这个记录... 其实这个问题是可以解决的,只需要在你不想出现在此情 ...

  9. Python输出HelloWorld(以及环境配置)

    java usebean 用法: https://blog.csdn.net/zhang150114/article/details/89434617

  10. Lightweight Render Pipeline

    (翻译) Lightweight Render Pipeline (LWRP),轻量级渲染管线,是一个Unity预制的Scriptable Render Pipeline (SRP).LWRP可以为移 ...