深入认识JavaScript中的this指针,学习群76650734
js中的this关键字详解
js中的this关键字详解this是Javascript语⾔的⼀个关键字。
它代表函数运⾏时，⾃动⽣成的⼀个内部对象，只能在函数内部使⽤。
⽐如，复制代码代码如下: function test(){ this.x = 1; }随着函数使⽤场合的不同，this的值会发⽣变化。
但是有⼀个总的原则，那就是this指的是，调⽤函数的那个对象。
下⾯分四种情况，详细讨论this的⽤法。
这是函数的最通常⽤法，属于全局性调⽤，因此this就代表全局对象Global。
请看下⾯这段代码，它的运⾏结果是1。
复制代码代码如下: function test(){ this.x = 1; alert(this.x); } test(); // 1为了证明this就是全局对象，我对代码做⼀些改变：复制代码代码如下: var x = 1; function test(){ alert(this.x); } test(); // 1运⾏结果还是1。
再变⼀下：复制代码代码如下: var x = 1; function test(){ this.x = 0; } test(); alert(x); //0函数还可以作为某个对象的⽅法调⽤，这时this就指这个上级对象。
复制代码代码如下: function test(){ alert(this.x); } var o = {}; o.x = 1; o.m = test; o.m(); // 1所谓构造函数，就是通过这个函数⽣成⼀个新对象（object）。
这时，this就指这个新对象。
复制代码代码如下: function test(){ this.x = 1; } var o = new test(); alert(o.x); // 1运⾏结果为1。
为了表明这时this不是全局对象，我对代码做⼀些改变：复制代码代码如下: var x = 2; function test(){ this.x = 1; } var o = new test(); alert(x); //2运⾏结果为2，表明全局变量x的值根本没变。
js this的理解
如何理解js中的thisthis的值取决于它所在的函数如何被调用。
下面是this可以获得新值的6种不同方式：•this在全局范围内•this在对象的构造函数内•this在对象的方法内•this在一个简单的函数内•this在箭头函数内•this在一个事件侦听器内下面我们一起来看看this是如何在每个环境中被改变的。
一、this在全局范围内当this在任何函数外面被调用时，也就是说在全局环境中被调用，在浏览器中。
它默认指向window 对象。
console.log(this) // Window一般在全局环境中，我们很少用this关键字，所以我们对它也没有那么在意，继续看下一个环境。
二、this在对象的构造函数内当我们使用new关键字创建一个对象的新的实例时，this关键字指向这个实例。
.functi on Human (age) {..th is.age = age;..}..let gr eg = new Human(22);..let th omas = new Human(24);...consol e.log(greg); // this.age = 22..consol e.log(thomas); // this.age = 24.通过上面的代码，我们会发现，greg是Human的一个实例，现在无论何时调用greg，this都不会指向thomas。
所以让this指向对象的实例是完全有道理的。
接下来让我们看一个密切相关的环境。
三、this在对象的方法内方法是与对象关联的函数的另一个通俗叫法，如下所示。
(注: 这里的方法是用ES6语法来写的, 如果不知道它们是什么, 请参见这里)..let o = {..// A method..aM ethod(){}..}.在对象的任何方法内的this都是指向对象本身。
.let o = {..sa yThis(){.console.log(this);..}..}....o.sayThis() // o.既然this指向对象本身，你就可以用方法来获取对象的实例，如下所示：.functi on Human(name) {..re turn {..name,..getName() {..return ;..}..}..}....const zell = new Human("Zell");..const vincy = new Human("Vincy");....consol e.log(zell.getName()); // Zell.在这两个对象上下文中, 改变的this值使你获得正确的实例, 这就是面向对象的编程的基础. 当然, 这是另外一个话题了.四、this在一个简单的函数内简单函数应该是我们非常熟悉的函数了，就像下面这个一样，以相同形式编写的匿名函数也被认为是简单函数。
深入理解Javascript之this关键字
深入理解Javascript之this关键字Javascript是一种很灵活的语言, 而This关键字又是灵活中的灵活, 但是因为它的灵活, 也注定了它的难用.以前我用this的时候, 都会觉得不踏实, 老是担心它不知道怎么地就会指到另外的什么地方.其实, 这都是因为, 我们对它的不了解.刚好最近再给百度学院做《Javascript高级-作用域/原型链》的ppt, 而swit1983网友也刚好提这个问题, 索性就把这部分内容独立总结出来, 与大家分享.首先, 我先抛出一个定论:”在Javascript中,This关键字永远都指向函数(方法)的所有者”.函数首先,让我们看看”函数”:.function introduce() {.alert("Hello, I am Laruence\r\n");.}对于,这个函数, this关键字指向谁呢?如我之前的文章所述(Javascript作用域), 定义在全局的函数, 函数的所有者就是当前页面, 也就是window对象.这也就是为什么, 我把函数用引号引起来. 因为定义在全局的函数, 其实也就是window对象的一个方法.所以,我们即可用通过函数名直接调用, 也可用通过window.方法名来调用, 这个时候, 方法中的this关键字指向它的所有者:window对象.如果, 我们查看window的introduce属性, 就会得到:.var name = "I am Laruence";.function introduce() {.alert();.}.alert(window.introduce);./**.* output:.* function introduce() {.* alert();.* }.*/看了上面的代码, 也许你就会想到既然, 全局函数是window对象的方法, 全局变量是window对象的属性(Javasript作用域中已有述及), 那么,在全局函数中就可用通过this关键字来访问全局变量吧?答案是肯定的, 如果调用introduce函数, 你就会认识我是Laruence.事件处理函数也许, 对于this关键字的迷惑, 绝大部分原因是来自把函数(方法)用在事件处理的时候..<input id="name"type="text"name="name"value="Laruence"/>比如, 我们现在需要在点击”name”输入框的时候, 显示出name输入框的value. 那么, 可用写下如下代码:.function showValue() {.alert(this.value);.}.document.getElementById('name').onclick = showValue;上面的代码, 运行正常, 但是why? 不是说函数的this指针永远指向函数所有者么? 不是说全局变量的所有者是window对象么?呵呵, 如果你能想到这个问题, 那说明你在认真的看我的文章, 否则,,我建议你从头看起, 否则看完了,你还是迷糊~恩, 对, 对于上面的代码, showValue是定义在了全局对象, 那么看来问题只能发生在onclick事件绑定的时候了.我们知道, 在Js中一切都是对象, 函数和方法也都是对象的属性, 只不过函数有可执行的内部属性.所以, 对于上面的代码, 在对onclick绑定处理器的时候, 其实是对id为name的输入框Dom对象的onclick属性赋值.也就是说, 我们把函数showValue Copy 给了name输入框对象的onclick属性. 如果我们查看此时的onclick:.function showValue() {.alert(this.value);.}.document.getElementById('name').onclick = showValue;.alert(document.getElementById('name').onclick);./**.* output.* function showValue() {.* alert(this.value);.* }.*/所以, 当事件触发的时候, 就会去调用name输入框的onclick方法, 这个时候,this关键字自然就指向的是name输入框了.但是, 迷惑的事情就来了, 比如下面这种写法:.function showValue() {.alert(this.value);.}.<input id="name"type="text"name="name"value="Laruence"onclick="showValue()"/>就无法正常运行, 这又是为什么呢?恩, 因为这个时候, 并不是赋值, 而是引用.如果我们注意俩种onclick的写法, 你会发现, 对于之前的方法, 我们使用的是:.dom.onclick = showvalue; //没有调用符而对于刚才的方法:.onclick = "showvalue()"//有调用符这个也能侧面的反映出俩者的区别:对于前者,是赋值, 而对于后者是引用. 如果我们这个时候查看输入框的onclick属性,我们得到:.alert(dom.onclick);./**.* output:.* function onclick() {.* showValue();.* }.*/看到区别了么? 也就懂得为什么了吧?讲到这里, 有一个很有趣的例子 ,大家可以在IE下试试:.<img src="xxx" onerror="alert(1);} function hi() { alert(2); " />改变this的指向那, 既然我们已经知道为什么了, 那怎么才能让this指向我们想要指的地方呢?对于上面的事件处理函数来说, 我们可以有如下几种写法:.dom.onclick = showValue();.dom.onclick = function() { alert(this.value) ;}.<input onclick="alert(this.value);"/> //想想刚才我们的引用,是如何把这句嵌入的..dom.addEventListener(dom, showValue, false); //ff only而对于不是事件处理函数的场合, 我们可以使用apply, 或者call, 来改变this关键字的指向.比如:.var laruence = {. name : 'laruence',. age : 26,. position : 'Senior PHP Engineer',. company : 'Baidu.inc'.};..function introduce() {.alert();.}..introduce.call(laruence);。
javaScript中的this的用法
进行批量添加事件时，this均可正确指向。
图示：
图3： 多次Traditonal Event Registration
2) Inline Event Registration
形如 <element onclick=”doSomething()”>
图示:
图4：B场景 Inline Event Registration
element.onclick = doSomething;
doSomething的引用(地址)赋给了element的onclick属性(这样就成为了函数)。此时
doSomething运行时拥有者(owner)就变成了element,this便指向了element。
图示：
图2: B场景 Traditional Event Registration
可以得到 :
function onclick(){
doSomething();
}
这仅仅是对doSomething()函数的一次调用,而doShomething的拥有者是window,因此 doSomething内的this指向window对象（啰嗦哦…….）.
3 . C场景
*/
//通过这种方式可以解决这个问题[有些情况也可用tempThis = this这种形式]ห้องสมุดไป่ตู้
this.btn.onclick = passHandler(this,btnOnclick);}function btnOnclick()
{
//如果this是DOM对象，这里就会报错，因为没有btn属性
2.2 this 指向分析
1 A场景。
关于js里的this关键字的理解
关于js⾥的this关键字的理解this关键字在c++，java中都提供了这个关键字，在刚开始学习时觉得有难度，但是只要理解了，⽤起来就⽅便多了，下⾯通过本篇⽂章给⼤家详解js⾥this关键字的理解。
关于this，是很多前端⾯试必考的题⽬，有时候在⽹上看到这些题⽬，⾃⼰试了⼀下，额，还真的错了！在实际开发中，也会遇到 this 的问题（虽然⼀些类库会帮我们处理），例如在使⽤⼀些框架的时候，例如:knockout，有时候不明⽩为什么不直接使⽤this,⽽要把 this 作为参数传⼊。
接下来你谈谈我对它的理解，也作为⼀个笔记，⽅便以后参阅。
有不对的地⽅，欢迎指出批评。
1. 不像C#，this⼀定是指向当前对象。
js的this指向是不确定的，也就是说是可以动态改变的。
call/apply 就是⽤于改变this指向的函数，这样设计可以让代码更加灵活，复⽤性更⾼。
2. this ⼀般情况下，都是指向函数的拥有者。
这⼀点很重要！这⼀点很重要！这⼀点很重要！这也是⼀道常见的⾯试题，如下代码：<script type="text/javascript"> var number = 1; var obj = { number: 2, showNumber: function(){ this.number = 3; (function(){ console.log(this.number); })(); console.log(this.number); } }; obj.showNumber();</script>由于showNumber⽅法的拥有者是obj，所以this.number=3; this 指向的就是 obj 的属性 number。
同理，第⼆个 console.log 打印的也是属性 number。
为什么第⼆点说⼀般情况下this都是指向函数的拥有者，因为有特殊情况。
详解javascript中的this对象
详解javascript中的this对象前言Javascript是一门基于对象的动态语言，也就是说，所有东西都是对象，一个很典型的例子就是函数也被视为普通的对象。
Javascript可以通过一定的设计模式来实现面向对象的编程，其中this “指针”就是实现面向对象的一个很重要的特性。
但是this也是Javascript中一个非常容易理解错，进而用错的特性。
特别是对于接触静态语言比较久了的同志来说更是如此。
示例说明我们先来看一个最简单的示例：<script type="text/javascript">var name = "Kevin Yang";function sayHi(){alert("你好，我的名字叫" + name);}sayHi();</script>这段代码很简单，我们定义了一个全局字符串对象name和函数对象sayHi。
运行会弹出一个打招呼的对话框，“你好，我的名字叫Kevin Yang”。
我们把这段代码稍微改一改：<script type="text/javascript">var name = "Kevin Yang";function sayHi(){alert("你好，我的名字叫" + );}sayHi();</script>这段代码和上段代码的区别就在于sayHi函数在使用name的时候加上了this.前缀。
运行结果和上面一摸一样。
这说明引用的也还是全局的name对象。
开头我们不是说了，函数也是普通的对象，可以将其当作一个普通变量使用。
我们再把上面的代码改一改：<script type="text/javascript">var name = "Kevin Yang";function sayHi(){alert("你好，我的名字叫" + );}var person = {};person.sayHello = sayHi;person.sayHello();</script>这一次，我们又创建了一个全局对象person，并将sayHi函数对象赋给person对象的sayHello属性。
JavaScript中this详解
JavaScript中this详解this是 JavaScript 语⾔的⼀个关键字。
它是函数运⾏时，在函数体内部⾃动⽣成的⼀个对象，只能在函数体内部使⽤。
function test() {this.x = 1;}上⾯代码中，函数 test 运⾏时，内部会⾃动有⼀个this对象可以使⽤。
⼀、this 的值是什么函数的不同使⽤场合，this有不同的值。
总的来说，this就是函数运⾏时所在的环境对象。
⼆、this 的使⽤场景1、作为⼀般函数执⾏2、作为对象属性执⾏3、作为构造函数执⾏4、通过 call、apply、bind 调⽤三、this 的判断1. 作为⼀般函数执⾏时，this 指代全局对象function test(){this.x = 1;alert(this.x);}test(); // 12. 作为对象属性执⾏时，this 指代上级对象function test(){alert(this.x);}var o = {};o.x = 1;o.m = test;o.m(); // 13. 作为构造函数调⽤时，this 指代 new 出的对象var x = 2;function test(){this.x = 1;}var o = new test();alert(x); // 2alert(o.x); // 1对于 new 的⽅式来说，this 被永远绑定在了 o 上⾯4. call、apply、bind 调⽤时，this 指代第⼀个参数let a = {}let fn = function () { console.log(this) }fn.bind().bind(a)()上述代码中，不管我们给函数 bind ⼏次，fn 中的 this 永远由第⼀次 bind 决定，所以结果永远是 window四、总结。
this指向的理解
this指向的理解在JavaScript中,`this`关键字是一个特殊关键字,用于引用当前正在作用的对象。
它是JavaScript中操作DOM对象和函数时的一个重要概念。
`this`关键字在作用域中的位置非常重要。
只有在函数定义中使用`this`,它才会指向当前函数所在的作用域。
如果在函数体中使用`this`,则`this`会指向函数体本身。
下面是一个简单的示例,说明`this`关键字在作用域中的用法: ```javascriptfunction myFunction() {console.log("this is within myFunction");}myFunction(); // this is within myFunction```在上面的示例中,`.myFunction()`本身是一个函数调用,`this`会指向函数调用本身。
当函数调用`myFunction()`时,`this`也会指向函数调用本身。
另一个示例是:```javascriptfunction myFunction() {console.log("this is within myFunction");}myFunction.call(this); // this is within myFunction```在这个示例中,`myFunction.call(this)`将函数call到`myFunction`对象上,并将`this`指向调用的函数本身。
除了使用`call()`和`apply()`方法之外,`this`关键字还可以通过属性引用来访问对象的属性。
例如:```javascriptfunction myFunction() {console.log("this is within myFunction"); = "John";} = "Jane"; // this is within myFunction ```在这个示例中,我们将``更改为`"Jane"`。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
学习群76650734
深入认识JavaScript中的this指针
this指针是面向对象程序设计中的一项重要概念，它表示当前运行的对象。
在实现对象的方法时，可以使用this指针来获得该对象自身的引用。
和其他面向对象的语言不同，JavaScript中的this指针是一个动态的变量，一个方法内的this指针并不是始终指向定义该方法的对象的，在上一节讲函数的apply和call方法时已经有过这样的例子。
为了方便理解，再来看下面的例子：
以下是引用片段：
＜script language="JavaScript" type="text/javascript"＞
＜!--
//创建两个空对象
var obj1=new Object();
var obj2=new Object();
//给两个对象都添加属性p，并分别等于1和2
obj1.p=1;
obj2.p=2;
//给obj1添加方法，用于显示p的值
obj1.getP=function(){
alert(this.p); //表面上this指针指向的是obj1
}
//调用obj1的getP方法
obj1.getP();
//使obj2的getP方法等于obj1的getP方法
obj2.getP=obj1.getP;
//调用obj2的getP方法
obj2.getP();
//--＞
＜/script＞
从代码的执行结果看，分别弹出对话框显示1和2。
由此可见，getP函数仅定义了一次，在不同的场合运行，显示了不同的运行结果，这是有this指针的变化所决定的。
在obj1的getP方法中，this就指向了obj1对象，而在obj2的getP方法中，this就指向了obj2对象，并通过this指针引用到了两个对象都具有的属性p。
由此可见，JavaScript中的this指针是一个动态变化的变量，它表明了当前运行该函数的对象。
由this指针的性质，也可以更好的理解JavaScript中对象的本质：一个对象就是由一个或多个属性（方法）组成的集合。
每个集合元素不是仅能属于一个集合，而是可以动态的属于多个集合。
这样，一个方法（集合元素）由谁调用，this指针就指向谁。
实际上，前
面介绍的apply方法和call方法都是通过强制改变this指针的值来实现的，使this指针指向参数所指定的对象，从而达到将一个对象的方法作为另一个对象的方法运行。
每个对象集合的元素（即属性或方法）也是一个独立的部分，全局函数和作为一个对象方法定义的函数之间没有任何区别，因为可以把全局函数和变量看作为window对象的方法和属性。
也可以使用new操作符来操作一个对象的方法来返回一个对象，这样一个对象的方法也就可以定义为类的形式，其中的this指针则会指向新创建的对象。
在后面可以看到，这时对象名可以起到一个命名空间的作用，这是使用JavaScript进行面向对象程序设计的一个技巧。
例如：
以下是引用片段：
var namespace1=new Object();
namespace1.class1=function(){
//初始化对象的代码
}
var obj1=new namespace1.class1();
这里就可以把namespace1看成一个命名空间。
由于对象属性（方法）的动态变化特性，一个对象的两个属性（方法）之间的互相引用，必须要通过this指针，而其他语言中，this关键字是可以省略的。
如上面的例子中：
以下是引用片段：
obj1.getP=function(){
alert(this.p); //表面上this指针指向的是obj1。