老生常谈 js中this的指向

在js中this的指向对于新手来说一定是个难题，但是如果你真正理解了的话，也就没什么问题啦，下面就来讲讲this吧。

JS中，this的值取决于调用的模式（调用对象），而JS中共有4种调用模式：

1.函数调用模式

当一个函数不是一个对象的属性时，当作函数俩调用，这时函数内的this指向全局对象（大对数情况下是window）

window.value=1;
function getValue(){
 console.log(this.value);
}
getValue();//输出1，此时的this指向window

2.方法调用模式

当一个函数是一个对象的属性时，我们称它为该对象的一个方法，当一个方法被调用时，this指向该对象

var Obj={
  value:2,
  getValue:function(){
       console.log(this.value);//输出2,this指向Obj
  }
}

！！！该模式中，this到对象的绑定发生在方法被调用时

3.构造器调用模式

使用new调用的函数称为构造器函数，此时的this指向该构造器函数实例出来的对象

function main(val){
  this.value=val;
}
main.prototype.getValue=function(){
  console.log(this.value);
}

var fun=new main(3);
fun.getValue();
fun.value;//输出3，this指向main的实例对象fun

4.apply/call调用模式以及bind

apply、call、bind方法可以让我们设定调用者中的this指向谁

function showValue(){
  console.log(this.value);
}
var obj={
  value:4
}
showValue.call(obj)//输出4，this指向了obj对象

ECMA5中新增了bind方法，具体用法可以google一下，这里是演示this绑定的用法

function showValue(){
  console.log(this.value);
}
var obj={
  value:4
}
var showValue2=showValue.bind(obj);
showValue2()//输出4，this指向了obj对象

bind有很多种用法，可以自己去查阅一下哦

以上这篇老生常谈 js中this的指向就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript中 this 指向问题深度解析

    JavaScript 中的 this 指向问题有很多文章在解释,仍然有很多人问.上周我们的开发团队连续两个人遇到相关问题,所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 this 的问题. 与我们常见的很多语言不同,JavaScript 函数中的 this 指向并不是在函数定义的时候确定的,而是在调用的时候确定的.换句话说, 函数的调用方式决定了 this 指向 . JavaScript 中,普通的函数调用方式有三种:直接调用.方法调用和 new 调用.除此之外,还有一些特殊的调用方式

  • javascript函数的四种调用模式

    1.介绍 先介绍一下函数的调用模式有哪四种: 函数调用模式, 方法调用模式, 构造函数调用模式, 上下文调用模式: 在这里对于函数的调用模式,主要介绍每种调用模式的this的指向和返回值. 2.代码分析 ①.函数调用模式 下面的调用模式就是大家最熟悉的函数调用模式,而函数调用模式的this指向和返回值是什么呢? function fn1 () { console.log(this); }; fn1(); // 在调用函数fn1时,输出的this的结果是Window 在上述代码中,fn1也就是函数

  • JavaScript中的this引用(推荐)

    this this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. 一.定义 1.this是函数内部的一个特殊对象(或this引用)--它引用的是函数据以执行的环境对象. 2.this引用是一种在JavaScript的代码中随时都可以使用的只读变量. this引用 引用(指向)的是一个对象,它有着会根据代码上下文语境自动改变其引用对象的特性.它的引用规则如下: • 在最外层代码中,this引用 引用的是全

  • 函数四种调用模式以及其中的this指向

    第一种:函数直接执行模式 function add(a,b){ console.log(this); return a+b; } add(10,20)//this===window 第二种:对象方法的调用模式 var obj={ name:'aaa', age:20, said:function(){ console.log(this); } } obj.said();//this===obj,此处this指代被调用者 第三种:构造器的调用模式 function School(){ this.s

  • 浅谈函数调用的不同方式,以及this的指向

    一.函数的调用方式 1.作为函数,一种直接易懂的方式(即函数调用模式). 2.作为方法,方法是连接在对象上的,被这个对象调用,这种形式就是面向对象编程. 3.作为构造器,在构造的过程中一个新的对象被创建出来. 4.经由函数的apply或者call方法. 二.函数参数 1.传入参数 (1)传入变量多于函数定义变量. (2)函数定义变量多余传入变量,多出来的变量是undefined 2.函数在被调用的时候,隐形的传入两个参数argument和this(即argument和this被悄悄传入函数,作用

  • 老生常谈 js中this的指向

    在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1.函数调用模式 当一个函数不是一个对象的属性时,当作函数俩调用,这时函数内的this指向全局对象(大对数情况下是window) window.value=1; function getValue(){ console.log(this.value); } getValue();//输出1,此时的thi

  • JS中改变this指向的方法(call和apply、bind)

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

  • 聊一聊JS中this的指向问题

    JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向,我会分以下几种情况来说. this的指向: 1.this 指的是调用当前方法(函数)的那个对象,也就是说函数在谁那被调用,this就指的是谁. 来看两个栗子: oBtn.onclick = function(){ alert(this); //oBtn } oBtn[i].onclick = fn

  • 老生常谈js中0到底是 true 还是 false

    想到一个好玩的,运行如下 javascript : if ('0') alert("'0' is true"); if ('0' == false) alert("'0' is false"); 结果是,两次都 alert 了!那么 '0' 到底是 true 还是 false 呢? 答案是:在js做比较的时候,有这样的三条规则: • 如果比较的两者中有bool,会把 bool 先转换为对应的 number,即 0 和 1 • 如果比较的双方中有一方为number一方

  • 老生常谈js中的MVC

    老生常谈js中的MVC

    MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): 1.用户在视图 V 上与应用程序交互 2.控制器 C 触发相应的事件,要求模型 M 改变状态(读写数据) 3.模型 M 将数据发送到视图 V ,更新数据,展现给用户 在js的传统开发模式中,大多基于事件驱动的: 1.hash驱动 2.DOM事件,用来驱动视图 3.模型事件(业务模型事件和数据模型事

  • JS中this的指向以及call、apply的作用

    在具体的实际应用中,this 的指向无法在函数定义时确定,而是在函数执行的时候才确定的,根据执行时的环境大致可以分为以下3种: 1.当函数作为普通函数调用时,this 指向全局对象 2.当函数作为对象的方法调用时,this 指向该对象 3.当函数作为构造器调用时,this 指向新创建的对象 示例一: window.name = 'myname'; function getName() { console.log(this.name); } getName(); //输出myname 示例二: v

  • js中this的指向问题归纳总结

    前言 js中this指向问题是个老生常谈的问题了,下面这篇文章再来给大家介绍下,大家可以看看,更深入的了解了解,下面话不多说了,来一起看看详细的介绍吧 this this:上下文,会根据执行环境变化而发生指向的改变. 1.单独的this,指向的是window这个对象 alert(this); // this -> window 2.全局函数中的this function demo() { alert(this); // this -> window } demo(); 在严格模式下,this是

  • 老生常谈JS中的继承及实现代码

    JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢? 一.构造函数继承 在构造函数中,同样属于两个新创建的函数,也是不相等的 function Fn(name){ this.name = name; this.show = function(){ alert(this.name); } } var obj1 = new Fn("AAA"); var obj2 = new Fn("BBB"); console.lo

  • Angular.JS中的this指向详解

    [this详解] 1.谁最终调用函数,this指向谁. ① this指向的,永远只可能是对象!!!!!! ② this指向谁,永远不取决于this写在哪!!而是取决于函数在哪调用. ③ this指向的对象,我们称之为函数的上下文context,也叫函数的调用者 2.※※※※※this指向的规律(与函数调用的方式息息相关): this指向的情况,取决于函数调用的方式有哪些: ① 通过函数名()直接调用:this指向window ② 通过对象.函数名()调用的:this指向这个对象 ③ 函数作为数组

  • 关于JavaScript中的this指向问题总结篇

    在javascript中this的指向一直是前端同事的心头病,也同时是各面试题的首选,现在我们就来总结一下js中this的指向.首先需要了解一下几个概念: 1:全局变量默认挂载在window对象下 2:一般情况下this指向它的调用者 3:es6的箭头函数中,this指向创建者,并非调用者 4:通过call.apply.bind可以改改变this的指向 下面我们具体分析一下 1:在函数调用时 (非严格模式) const func = function () { console.log(this)

随机推荐