javascript中this指向问题总结

worldligang 发布于2019-08-23 12:38 / 293人阅读

摘要：文章目的是总结下这个事情，如果没有考虑周全，遗漏某一条，请过路的留言写，我在补上。类的实例在函数中的一般指向和中括号里面的第一个参数是谁就指向谁。输出说明指向的是输出，说明指向的是箭头函数中的，就是定义是所在的对象，而不是使用时所在的对象

文章目的是总结下这个事情，如果没有考虑周全，遗漏某一条，请过路的留言写，我在补上。

在自制行函数中，this --> window

    let obj = {
        name: "fung",
        getName: ~function(params) {
            // this-->window
           console.log(this); //window
        }() 
    };

给元素的某个事件绑定方法，当事件触发执行，对应方法的时候，方法中的this一般是指当前操作的元素本身。

let box = document.getElementById("box");
box.onclick = function () {
    // this -- > box
    console.log("box", this); //box对象
}

当方法执行时，看方法的前面有没有点，如果有点，点前面是谁，this就是指向谁；如果没有点一般都是指向window

var objTest = {
    name: "fung",
    getName: function () {
        console.log("objTest", this);
    },
    timeout: function(params) {
        setTimeout(function(){
            //this --> window
            console.log("setTimeout", this);
        }, 1000);
    }
};
objTest.getName(); //this --> objTest
let fn = objTest.getName;
fn(); // this --> window

在构造函数模式中，方法体中出现的this是当前类的一个实例。

function Person(name, age, sex) {
    //this --> person(Person类的实例person)
    this.name = name;
    this.age = age;
    this.sex = sex;
    console.log("Person", this);
}
let person = new Person("fung", 19, "femail");

在setTimeout函数中的this一般指向window

objTest.timeout();

call和apply中括号里面的第一个参数是谁this就指向谁。

let oldObjec = {
    name: "oldObjec",
    age: 1000,
    getName: function() {
        console.log("oldObjec getName", this.name);
    }
};
let newObjec = {
    name: "newObjec",
    age: 00,
    getAge: function () {
        console.log("newObjec getAge", this.age);
    }
};
let name = "window";
oldObjec.getName.call(newObjec); //输出newObjec,说明this指向的是newObjec
newObjec.getAge.call(oldObjec);//输出1000， 说明this指向的是oldObject

箭头函数中的this，就是定义是所在的对象，而不是使用时所在的对象

var age = 111;
function getName () {
setTimeout(() => {
        console.log("arrowObjec getName", this.age);
    }, 1000);
}
getName.call({age: 2000});

GPU云服务器云服务器 javascript中this详解改变this指向 this的指向 javascript的this

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

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

ES5 call,apply,bind方法总结（包括理解this的指向问题）

总结call,apply,bind方法的理解使用和区别。 call,apply,bind这三个方法在JavaScript中是用来改变函数调用的this指向。那么改变函数this指向有什么用呢？我们先来看一段代码 var a= { name:harden, fn:function () { console.log(this.name); } } var b =...

nanchen2251 2019-08-23 18:15 评论0 收藏0
javascript this的学习总结

摘要：例如通过，调用时强制把它的绑定到上。箭头函数问题箭头函数体内的对象就是定义时所在的对象，而不是使用时所在的对象，固定不变。刚入门javascript，关于this的学习，花了自己挺多的时间，做了比较多的功课，看了一篇又一篇的文章，也看了一些书籍，今天就结合看的那些东西总结下自己所学到的东西，方便留着以后回看，进一步的学习，这篇文章会不断的更新，不断的更新自己的想法，现在还是一个入门不...

A Loity 2019-08-21 17:32 评论0 收藏0
JavaScript中this总结

摘要：普通函数调用函数在全局作用域下运行在非严格模式下，指向全局对象，在严格模式下，会变成。使用来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。即构造函数的指向它实例化出来的对象。 JavaScript中的this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。先来列举一下都有哪些函数调用方式：普通函数调用对象方法调用 call()、apply()...

ghnor 2019-08-22 11:15 评论0 收藏0
JavaScript面向对象程序设计

摘要：构造函数模式这种方法创建自定义的构造函数，从而自定义对象类型的属性和方法。借用构造函数在子类型构造函数的内部调用超类型构造函数，通过和方法来实现。 JavaScript中没有类的概念，它不是严格意义上的面向对象语言，而是基于对象(Object-based)的编程语言。下面是读《JavaScript高级程序设计（第三版）》的学习笔记，总结一些常用的创建对象和继承的方法。一、创建对象 1...

wfc_666 2019-08-20 10:51 评论0 收藏0
你不知道的this

摘要：本内容来自你不知道的上卷，做了简单的总结。如果不使用这段代码该如何写呢那就需要给和显示传入一个上下文对象对比发现提供了额一种更优雅的方式来隐式传递一个对象引用。四总结随着你使用的模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱。本内容来自《你不知道的JavaScript(上卷)》，做了简单的总结。 this关键字是javascript最复杂的机制之一。它是一个很特别的关键字，...

terasum 2019-08-19 17:51 评论0 收藏0