JavaScript中的this指向总结

lavnFan 发布于2019-08-26 13:39 / 1429人阅读

摘要：其中和在传入要绑定的指向时，立即执行。需要注意的是，当使用改变函数内部的指向时如果传入的不是一个对象，会调用相对的构造函数，进行隐式类型装换。

关于javascript中this指向的总结 浏览器环境

在全局作用域中，this的指向是window对象

console.log(this);
//Window对象
console.log(this === window);
//true

ES5函数中this的指向

在非严格模式下,函数中的this指向window对象，因为此时函数fn是window的一个属性，所以运行fn时，fn中的this指向window。其实this的指向就是指向函数的运行时环境。

var fn = function () {
    console.log(this);
    console.log(this === window);
}
fn(); 
//Window对象
//true

在严格模式下，若不使用window调用函数，函数中的this指向undefined；使用window调用时，指向的时window对象。

var fn = function () {
    "use strict"
    console.log(this);
    console.log(this === window)
}
fn();
//undfined
//false
window.fn();
//Window对象
//true

在严格模式下有一种例外的情况，就是在定时器中的this，此时无论使用window调用还是不使用window调用，this都指向window。

var fn = function () {
    "use strict"
    setTimeout(functioin(){
        console.log(this);
        console.log(this === window);
    },1000)
}
fn();
//Window对象
//true

在ES6中箭头函数this的指向

在ES6中箭头函数this的指向取决于定义时环境中的this指向一致

var fun = () => {
    console.log(this);
    console.log(this === window);
}
fun();
//Window对象
//true
//定义箭头函数时,就是这个过程：()=>{...}所在的环境是window，所以运行fun()时，箭头函数内部的this指向window

var obj = {
    name:"Jay",
    age:25,
    fn:()=>{console.log(this)},
    fun:function(){
        console.log(this)
    }
};
//在定义fn时，fn内部this的指向就是定义obj对象时所在的环境，obj所在的环境是window，所以调用obj.fn()时，返回的this就是Window对象
obj.fn(); //Window对象
obj.fun();//{name: "Jay", age: 25, fn: ƒ, fun: ƒ}

var name = "Kobe";
var obj = {
    name:"Jay",
    age:25,
    fn1:function(){
        return function(){
            console.log(this.name);
        }
    },
    fn2:() =>{
        return () => {
            console.log(this.name);
        }
    }
};
var fnn1 = obj.fn1();
var fnn2 = obj.fn2();
fnn1();//Kobe
fnn2();//Kobe

在DOM事件中的this指向

DOM事件处理函数中this的指向是触发该事件的对象

App

//当点击App时，console.log(this),打印出来的值时 App

构造函数中的this指向

构造函数中的this的指向是通过构造函数所创建出的对象实例

function Person (){
    this.name = "Jay",
    this.age = 25;
    console.log(this);
}
var p1 = new Person();
//Person {name: "Jay", age: 25}

改变this的指向

可以使用call()、apply()、bind()改变函数内部this的指向（ES6中的箭头函数除外）。其中call()和apply()在传入要绑定的this指向时，立即执行。bind()在传入要绑定的this指向时，并不执行，需要再次调用才会执行。

使用call()改变this的指向

 var obj = {
    name:"Jay",
    age:25
};
function fn(){
    console.log(this === obj);
    console.log(this);
}
fn.call(obj);
//true
//{name: "Jay", age: 25}

使用apply()改变this的指向

 var obj = {
    name:"Jay",
    age:25
};
function fn(){
    console.log(this === obj);
    console.log(this);
}
fn.apply(obj);
//true
//{name: "Jay", age: 25}

使用bind()改变this的指向

 var obj = {
    name:"Jay",
    age:25
};
function fn(){
    console.log(this===obj);
    console.log(this);
}
//fn.bind(obj);不会立即执行，需要再次调用才会执行。
var fn1 = fn.bind(obj);
fn1();
//true
//{name: "Jay", age: 25}

需要注意的是，当使用call()、apply()、bind()改变函数内部this的指向时,如果传入的不是一个对象，会调用相对的构造函数，进行隐式类型装换。

function fn(){
    console.log(typeof this === "object");
    console.log(this);
}
fn.apply("I am a string");
//true
//String{"I am a string"}

私有云云服务器 javaScript中的this 改变this指向 this的指向 js中的this

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

转载请注明本文地址：https://www.ucloud.cn/yun/109245.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指向问题总结

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

worldligang 2019-08-23 12:38 评论0 收藏0
JavaScript学习总结——this对象

摘要：全局环境在全局环境中使用，它会指向全局对象。作为构造函数调用中的构造函数很特殊，如果不使用调用，则和普通函数一样。作为又一项约定俗成的准则，构造函数以大写字母开头，提醒调用者使用正确的方式调用。在JavaScript中，this关键字是动态绑定的，或称为运行期绑定，这极大地增强的我们程序的灵活性，同时也给初学者带来了很多困惑。本文总结了this的几个使用场景和常见误区。全局环境在...

wzyplus 2019-08-19 18:06 评论0 收藏0
JavaScript 面向对象开发知识总结基础篇

摘要：字面形式允许你在不需要使用操作符和构造函数显式创建对象的情况下生成引用值。操作符以一个对象和一个构造函数作为参数鉴别数组有前一小结可以知道鉴别数组类型可以使用。属性是函数独有的，表明该对象可以被执行。这种函数被称为匿名函数。引子： 1.JavaScript 中的变量类型和类型检测 1.1原始类型 1.2引用类型 1.3內建类型的实例化 1.4函数的字面形式 1.5正则表达式的字...

Kross 2019-08-22 10:35 评论0 收藏0