一、this

  JavaScrip的this总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。

二、this的指向

 根据运用情景可分为四类:

  1.作为对象的方法调用;

  2.作为普通函数调用;

  3.构造器调用;

  4.Function.prototype.call或Function.prototype.apply调用。

1.作为对象的方法调用:

  当函数作为对象的方法被调用时,this指向该对象:

var obj = {
a :1,
getA:function () {
alert(this === obj);//true
alert(this.a) //1
}
};
obj.getA();

   2.作为普通函数调用;

  当函数不作为对象的属性被调用时,即该函数为普通函数时,此时this的指向时全局对象,在浏览器的js中,这个全局对象也就是window。

window.name = 'hello world';
var getName = function () {
return this.name;
}
console.log(getName());//hello world

  或

window.name = 'hello world';
var obj = {
name : 'ling',
getName : function () {
return this.name;
}
};
var getName = obj.getName;
console.log(getName()); //hello world
console.log('obj----'+obj.getName());//obj----ling

  那么怎么解决这个问题呢。。。。。在书上居然也讲了我之前写前端时公司老同志教我的方法,哈哈哈~~~那就是“that”大法!

//假设节点id为abc
window.id = 'ling';
document.getElementById('ling').onclick = function () {
alert(this.id); //abc
var callback = function () {
alert(this.id);//ling
}
callback();
};

  方法如下~~

//假设节点id为abc
window.id = 'ling';
document.getElementById('ling').onclick = function () {
var that = this;
var callback = function () {
alert(that.id);//abc
}
callback();
};

 3.构造器调用;

  js中没有类,但是我们可以从构造器中创建对象,同时也提供了new运算符使得构造器看起来更像一个类。

  当使用new运算符调用函数时,该函数总会返回一个对象,通常情况下。构造器里的this就指向这个返回的对象。

var MyClass = function () {
this.name = 'ling'; }
var obj = new MyClass();
console.log(obj.name);//ling

  但是要特别注意如果函数显示地返回一个对象,那么this指的便是这个显示对象。若显示返回的是非对象类型(string等),则不会出现下面的问题。

var MyClass = function () {
this.name = 'ling';
return {
a : 'abc'
};
}
var obj = new MyClass();
console.log(obj.name);//undefined
console.log(obj.a);//abc

  4.Function.prototype.call或Function.prototype.apply调用。

  与普通函数相比,用call()和apply()可以动态改变传入函数的this指向。

  

var obj1 = {
name: 'ling',
getName : function () {
return this.name
}
}
var obj2 = {
name : 'abc'
}
console.log(obj1.getName());//ling
console.log(obj1.getName.call(obj2));//abc

  

JS中this的指向问题(读书笔记纯手打~)的更多相关文章

  1. 轻松了解JS中this的指向

    JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向 ...

  2. 理解js中this的指向

         学习自原文  http://www.cnblogs.com/pssp/p/5216085.html后的一点小结(原文作者总结的很棒^_^)! 关于js中this的指向,在函数定义的时候还无法 ...

  3. js中this的指向

    在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1. ...

  4. JS中的this 指向问题

    我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...

  5. js中改变this指向的call、apply、bind 方法使用

    前言: 由于js 中this的指向受函数运行环境的影响,指向经常改变,使得开发变得困难和模糊,所以在封装sdk,写一些复杂函数的时候经常会用到this 指向绑定,以避免出现不必要的问题,call.ap ...

  6. js中 this 的指向

    js中 this的指向一共存在3种地方: 1.全局的this; 2.构造函数的this; 3.call/apply; 一.全局的this: function test(){ this.d = 3;// ...

  7. 彻底理解js中this的指向,不必硬背。

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  8. 了解学习JS中this的指向

    [转] 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问 ...

  9. JS中this的指向问题

    JS中this的定义:this对象是在运行时基于函数的执行环境绑定的(通俗点来说就是:this代表当前函数属于哪个对象). this一般情况下都代表的是global对象,在浏览器中就是window对象 ...

随机推荐

  1. R语言学习笔记(十五):获取文件和目录信息

    file.info() 参数是表示文件名称的字符串向量,函数会给出每个文件的大小.创建时间.是否为目录等信息. > file.info("z.txt") size isdir ...

  2. wamp调用ICE中间件

    wamp调用ICE中间件 wamp 是集成开发包,我的wamp中的php 为5.3.10 ,经过3天艰苦奋战,终于在phpinfo()中看到了 ICE 出现了.. OK,最新的ice  为 3.5.1 ...

  3. 从0开始 java 网站开发(jsp)【1】

    前提:安装java 并配置环境变量 java下载地址: http://www.java.com/zh_CN/ 环境变量配置 本地PC路径: 电脑--属性--高级--环境变量 在系统变量中: 新建 名: ...

  4. 3,jieba gensim 最好别分家之最简单的相似度实现

    简单的问答已经实现了,那么问题也跟着出现了,我不能确定问题一定是"你叫什么名字",也有可能是"你是谁","你叫啥"之类的,这就引出了人工智能 ...

  5. .netcore centos环境搭建实战

    步骤 1. 安装VMware Workstation 下载地址:https://my.vmware.com/cn/web/vmware/info/slug/desktop_end_user_compu ...

  6. Page Object 设计模式介绍

    Page Object 是 Selenium 自动化测试项目开发实践的最佳设计模式之一,Page Object 的主要体现于对界面交互细节的封装,这样可以使测试案例更关注与业务而非界面细节,提高测试案 ...

  7. 《百词斩·象形9000》第一册(上) 符号Symbol 1

    001-upon prep. 在......上面 Wish upon a star.#对着星星许愿. 002-think V. 想,思索,认为:以为,预料 What do you think?#你认为 ...

  8. Java中的while(true)

    while(true)是一个无限循环 在内部用break或return退出循环,否则一直循环

  9. Visual Studio Code 配置Go 开发环境最简单的方法!!!

    由于大家都知道的原因,在国内如果想访问go等各种资源,都会遇到某种不可预知的神奇问题.导致在VS Code中安装 go 各种插件都会失败. 于是乎,网上就出现了各种各样的解决方案:什么手动git cl ...

  10. java设计模式之模版方法模式以及在java中作用

    模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式实现,然后声明一些抽象方法来迫使子类实现剩余的逻辑.不同的子类可以以不同的方式实现这些抽象方法,从而对剩余的逻辑有 ...