资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Javascript This 机制

Javascript This 机制

DTeam / 1336人阅读

摘要：中除了声明定义的形参之外，每个函数还可以接收两个附加参数。这里我们就来仔细学习一下吧。加油，多看几遍，影像会更深的呢

js中除了声明定义的形参之外，每个函数还可以接收两个附加参数（this、arguments）。这里我们就来仔细学习一下this吧。

在javascript中明确this指向大致有四种情况

函数调用的模式，this指向window

function aa()
{
    console.log(this);
}
aa(); // window
方法调用模式, this指向方法所在的对象
var a = {};
a.name = "zjj";
a.getName = function(){
    console.log(this.name);
}
a.getName();   // "zjj",这里this指向的是调用的那个对象

构造函数模式， this指向新生成的实例
function aaa(name){
    this.name = name;
    this.getName = function(){
        console.log(this.name);   // 这里的this指向实例化的对象
    }
}

var a = new aaa("meils");
a.getName(); // "meils"

var b = new aaa("bobo");
b.getName()        //  "bobo"
apply/call调用模式
var list1 = {name: "zjj"};
var list2 = {name: "lll"};

function a(){
    console.log(this.name);
}

a.call(list1);  // "zjj"
a.call(list2);  // "lll"

先来一个面试题吧

obj = {

    name: "a",

    getName : function () {

        console.log(this.name);console.log(this);

    }

}


var fn = obj.getName

obj.getName() // 这里this指向的是调用getName的那个对象

var fn2 = obj.getName() // 同上执行一次 ，返回的fn2已经不是一个函数了

fn()        // 这里的this指向的是window，由于window下并没有name变量，所以没有输出

fn2()        // 由于fn2不是一个函数，因此会报错
// 输出如下

a
{name: "a", getName: ƒ}
a
{name: "a", getName: ƒ}getName: ƒ ()name: "a"__proto__: Object

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
Uncaught TypeError: fn2 is not a function
下面我们依旧通过例子来学习this哦

实例一

function demo1(){
    console.log(this)  
}
function demo2(){
    this.num=2
    function demo3(){
          this.num++
          console.log(num)
    }
    return demo3; 
}


demo1(); // this指向window
var a = demo2(); // 
a(); // 3  a变量将demo2函数执行后的的返回值及demo3函数返回， 然后执行，此时this依旧指向window
var obj1={
      value:3,
      increment:function(){
           this.value++;
           console.log(this,this.value)
      }
}
obj1.increment()

// {value: 4, increment: ƒ}  4

实例二

var obj2={
      value:4,
      increment:function(){
           this.value++;
           console.log(this,this.value);
           (function(){
                 console.log("这又是啥",this,this.value)
                 this.value=1
           })() 
      },
      print:function(){
            console.log("print",this.value)
      }
}
obj2.increment() // this是obj2
obj2.print()
var P=obj2.print
P() // this是window

// 
{value: 5, increment: ƒ, print: ƒ} 5
这又是啥 Window  undefined
print 5
print 1

obj2.increment() this是obj2，执行了value++，此时的value为5，而后是一个自我执行的函数，这里的this是window，由于window下的value还没有申明，因此返回的是undefined。之后执行obj2.print()这里的this是obj2，输出value是5，而后变量P执行了obj2的print方法，这里的this指向了window，所以输出的是1
ES6的箭头函数

现在我们都经常会用的es6的箭头函数，箭头函数是不会自动绑定this的，默认从上一级继承下来，那不妨把刚才的例子改下看看

var obj1={
      value:3,
      increment:()=>{
           this.value++;
           console.log(this,this.value)
      }
}
obj1.increment() // 这时候会看到输出window对象和一个NaN
如前面所说箭头函数不会自动绑定this，所以执行increment函数中的this依旧会指向window，而window下的value还不存在，所以为undefined再执行+1操作所以value就变成了NaN了
var obj2={
      value:4,
      increment:()=>{
           this.value++;
           console.log(this,this.value);
           (function(){
                 console.log("这又是啥",this,this.value)
                 this.value=1
           })() 
      },
      print:()=>{
            console.log("print",this.value)
      }
}
obj2.increment() 
obj2.print()
var P=obj2.print
P()
// 打印结果出如下
// Window 
//  NaN
// 这又是啥 Window
// NaN
// print 1
// print 1
第一个依旧window对象(this没绑定的嘛)，后面的value当然又是没声明.....然后自执行函数也没得说,后面才接着给window的value赋值为1了，后面就两句自然输出两次1了
相信看了上面的例子，大家一定对this的使用有了一定的了解了吧。加油，多看几遍，影像会更深的呢
云服务器 GPU云服务器 js中的this机制 javascript的this javaScript中的this javascript中this详解

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

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

相关文章

  • JavaScript 五十问——从源码分析 ES6 Class 的实现机制

    摘要：防止类的构造函数以普通函数的方式调用。这个函数的主要作用是通过给类添加方法，其中将静态方法添加到构造函数上，将非静态的方法添加到构造函数的原型对象上。 Class是ES6中新加入的继承机制，实际是Javascript关于原型继承机制的语法糖，本质上是对原型继承的封装。本文将会讨论：1、ES6 class的实现细2、相关Object API盘点3、Javascript中的继承实现方案盘点...

    LeexMuller 评论0 收藏0

  • 理解JavaScript的核心知识点：This

    摘要：关键字计算为当前执行上下文的属性的值。毫无疑问它将指向了这个前置的对象。构造函数也是同理。严格模式无论调用位置，只取显式给定的上下文绑定的，通过方法传入的第一参数，否则是。其实并不属于特殊规则，是由于各种事件监听定义方式本身造成的。 this 是 JavaScript 中非常重要且使用最广的一个关键字，它的值指向了一个对象的引用。这个引用的结果非常容易引起开发者的误判，所以必须对这个关...

    TerryCai 评论0 收藏0

  • 写给Java开发者看的JavaScript对象机制

    摘要：如果你已经对机制已有了解，但是由于两者对象机制的巨大本质差异，对它和构造函数，实例对象的关系仍有疑惑，本文或许可以解答你的问题。所有的原型对象都会自动获得一个属性，这个属性的值是指向原型所在的构造函数的指针。 帮助面向对象开发者理解关于JavaScript对象机制 本文是以一个熟悉OO语言的开发者视角，来解释JavaScript中的对象。 对于不了解JavaScript 语言，尤其是习...

    Charles 评论0 收藏0

  • 细说 Javascript 函数篇（二） : this 的工作机制

    摘要：与其他编程语言相比，对的使用是一套完全不同的机制。在五种情况下的值是各有不同的。调用一个函数时在这里，同样指向全局对象。此时在函数内，指向新建的对象。尽管，晚绑定初看上去是个不好的决定，但实际上这是原型式继承工作的基础。 与其他编程语言相比，Javascript 对 this 的使用是一套完全不同的机制。this 在五种情况下的值是各有不同的。 全局作用域下 this; 当在全...

    ZoomQuiet 评论0 收藏0

  • 这一次，我们换种姿势学习 javascript

    摘要：操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。此外可以使用和来设置对象及其属性的不可变性级别。忽视这一点会导致许多问题。使用调用函数时会把新对象的属性关联到其他对象。 前言 《你不知道的 javascript》是一个前端学习必读的系列，让不求甚解的JavaScript开发者迎难而上，深入语言内部，弄清楚JavaScript每一个零部件的用途。本书介绍了该系列的两个主题：...

    zone 评论0 收藏0

  • Javascript函数执行、new机制以及继承

    摘要：函数执行一个函数，被执行有三种途径或机制以及继承中定义了一种对象，称之为对象，其内部实现包括以下说明该对象可以被执行，具有属性说明该对象可以接受操作，具有构造器属性指向对象的原型链。 JS函数执行 一个JavaScript函数fn，被执行有三种途径： fn() new fn() fn.call()或fn.apply() new机制以及继承 JavaScript中定义了一种对象，称之...

    sshe 评论0 收藏0

发表评论

登陆后可评论

0条评论

DTeam

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<