This article shares with you the basic JS content this pointer and the related knowledge points of call and apply. Friends who are interested can learn and refer to it.
In specific practical applications, the point of this cannot be determined when the function is defined, but is determined when the function is executed. It can be roughly divided into the following three types according to the execution environment:
1. When a function is called as a normal function, this points to the global object
2. When a function is called as a method of an object, this points to the object
3. When the function is called as a constructor, this points to the newly created object
Example 1:
window.name = 'myname'; function getName() { console.log(this.name); } getName(); //输出myname
Example 2:
var boy = { name: 'Bob', getName: function() { console.log(this.name); } } boy.getName(); //输出Bob
Example 3:
function Boy(name) { this.name = name; } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Bob
For Example 3, there is another special case, that is, when the constructor returns an object through "return" At that time, the final result of this operation returns this object, not the newly created object, so this is of no use in this case.
Example four:
function Boy(name) { this.name = name; return { //返回一个对象 name: 'Jack' } } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Jack
Example five:
function Boy(name) { this.name = name; return 1; //返回非对象 } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Bob
call and apply The role of
apply accepts two parameters. The first parameter specifies the pointer of this in the function body. The second parameter is an array or array-like used to pass the called function. parameter list.
Example 1:
function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); } var boy1 = { name: 'Bob', age: 12 } getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming
call The number of parameters passed in is not fixed. The same as apply, the first parameter is also used to specify The point of this in the function body, starting from the second parameter, each parameter is passed to the called function in turn.
Example 2:
function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); } var boy1 = { name: 'Bob', age: 12 } getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping
In addition, most advanced browsers also implement the bind method. The difference between it and call and apply is that bind only changes the function Internal this points to, but it will not be executed immediately, you need to call it explicitly.
Example 3: Simulate the browser's bind method
Function.prototype.bind = function(obj){ var self = this; return function(){ return self.apply(obj,arguments); } }; var obj = { name: 'Bob', age: 12 }; var func = function(){ console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); }.bind(obj); func('sing','shopping');
Missing this
In some cases, the pointing of this will be lost. At this time, we need to use call, apply and bind to change the pointing of this.
Example 1: When the "getName" method is called as a property of the "boy" object, this points to the "boy" object. When another variable refers to the "getName" method, because it is used as a normal function call, so this points to the global object window
var boy = { name: 'Bob', getName: function() { console.log(this.name); } } boy.getName(); //输出Bob var getBoyName = boy.getName; getBoyName(); //输出undefined
Example 2: Even if the function is defined inside the function, if it is called as a normal object, this also points to the window object
var boy1 = { name: 'Bob', age: 12, getInfo: function() { console.log(this.name); function getAge() { console.log(this.age); } getAge(); } } boy1.getInfo(); //Bob //undefined
The above is the content of this chapter All content, for more related tutorials please visit JavaScript Video Tutorial!
The above is the detailed content of The pointer of this in JS and the functions of call and apply. For more information, please follow other related articles on the PHP Chinese website!

数据准备为了聚合查询的条件,添加了几条数据。MIN我们试着获取最小的年龄。方法实现@OverridepublicIntegergetAgeMin(){Mapresult=testFluentMybatisMapper.findOneMap(newTestFluentMybatisQuery().select.min.age("minAge").end()).orElse(null);returnresult!=null?Convert.toInt(result.get(&qu

同事因为this指向的问题卡住的bug,vue2的this指向问题,使用了箭头函数,导致拿不到对应的props。当我给他介绍的时候他竟然不知道,随后也刻意的看了一下前端交流群,至今最起码还有70%以上的前端程序员搞不明白,今天给大家分享一下this指向,如果啥都没学会,请给我一个大嘴巴子。

一、this关键字1.this的类型:哪个对象调用就是哪个对象的引用类型二、用法总结1.this.data;//访问属性2.this.func();//访问方法3.this();//调用本类中其他构造方法三、解释用法1.this.data这种是在成员方法中使用让我们来看看不加this会出现什么样的状况classMyDate{publicintyear;publicintmonth;publicintday;publicvoidsetDate(intyear,intmonth,intday){ye

本篇文章带大家解读vue源码,来介绍一下Vue2中为什么可以使用 this 访问各种选项中的属性,希望对大家有所帮助!

什么是this?下面本篇文章给大家介绍一下JavaScript中的this,并聊聊this在函数不同调用方式下的区别,希望对大家有所帮助!

1.this引用1.1为什么要有this引用先来写一个日期类的例子:publicclassclassCode{publicintyear;publicintmonth;publicintday;publicvoidsetDay(inty,intm,intd){year=y;month=m;day=d;}publicvoidprintDate(){System.out.println(year+"-"+month+"-"+day);}publicstatic

JavaScript中箭头函数是一种比较新的语法,没有自己的this关键字,相反箭头函数的this指向包含它的作用域对象,影响方面有:1、箭头函数中的this是静态的;2、箭头函数不能作为构造函数使用;3、箭头函数不能用作方法。

jQuery是一种流行的JavaScript库,广泛用于网页开发中的DOM操作和事件处理。其中一个重要的概念就是this关键字的使用。在jQuery中,this代表当前操作的DOM元素,但在不同的上下文中,this的指向可能会有所不同。本文将通过具体的代码示例来解析jQuery中this的使用技巧。首先,让我们来看一个简单的示例:


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

Atom editor mac version download
The most popular open source editor

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
