http://blog.csdn.net/itpinpai/article/details/51004266

this关键字
本意:这个、这里的意思.
在JavaScript中是指每一个方法或函数都会有一个this对象,this对象是方法(或函数)在执行时的那个环境,也可以说是这个函数在那个作用域下运行的

一共有四种调用模式:方法调用模式(对象属性模式)、函数调用模式(就是普通的函数执行)、构造调用模式(应该叫实例上的方法模式更好)和apply调用模式。

一、方法调用模式
当它为一个对象上的方法的时候,this是当前这个对象

function age() { alert(this); }
var person = new Object();
person.age = age;
这里的this指向的就是创建的这个person对象

二、函数调用模式
当函数并非一个对象的属性时,那么它被当做一个函数来调用。此模式下this绑定到全局对象
var a = 1;
function fn() {
  console.log( this.a );
}
fn(); // 1 
fn函数中的this指定的是全局对象,全局对象是window

三、构造函数调用模式
在构造函数里的this是指向这个对象

function  Person( age ) {
  this.age = age;
}
var person = new Person(15);
console.log(person.age); // 15

四、apply调用模式
apply是把一个函数当成另一个对象的方法来调用

function age() {
  console.log(this.age);
}
function Person() {
  this.age = 18;
}
var person =  new Person();
age.apply(person); // 18

一.函数调用,此时this是全局的也就是window
  var c=function(){
   alert(this==window)
  }
  c()//true

二.方法调用
 var myObj={
  value:2,
  inc:function(num){
   alert(this.value+num);
  }
 }

myobject.inc(1); //结果3,因为this指向myObj

注意:内部匿名函数不属于当前对象的函数,因此this指向了全局对象window

var myObj={name:'myObject',value:0,increment:function(num){this.value += typeof(num) ==='number'? num:0;},toString:function(){return '[object:'+this.name+'{value:'+this.value+'}]';},getInfo:function(){return (function(){return this.toString();//内部匿名函数不属于当前对象的函数,因此this指向了全局对象window})();}}
alert(myObj.getInfo());//[object window];
点击看结果
解决方法:var myObj={name:'myObject',value:0,increment:function(num)   {this.value += typeof(num) ==='number' ? num : 0;},toString:function()   {return '[object:'+this.name+'{value:'+this.value+'}]';},getInfo:function(){var This=this;//先把当前的this指向存起来return (function(){ return This.toString();})();}}
alert(myObj.getInfo());//[Object:myObject {value:0}]点击看结果 

三.用new关键字来新建一个函数对象的调用,this指向被绑定到构造函数的实例上var fn = function (status){this.status = status;}fn.prototype.get_status = function(){return this.status;}var test = new fn('my status');alert(test.get_status);//my status,this指向test
四.apply/call调用function MyObject(name){this.name=name ||'MyObject';this.value=0;this.increment=function(num){this.value += typeof(num) === 'number' ? num : 0;};this.toString=function(){return '[Object:'+this.name+' {value:'+this.value+'}]';};this.target=this;}function getInfo(){return this.toString();}var myObj=new MyObject();alert(getInfo.apply(myObj));//[Object:MyObject {value:0}],this指向myObjalert(getInfo.apply(window));//[object Window],this指向window通过call和apply可以重新定义函数的执行环境,即this的指向,这对于一些应用当中是十分常用的。
点击看结果

转载于:https://www.cnblogs.com/mimime/p/5890907.html

【转】JavaScript中的this关键字使用的四种调用模式相关推荐

  1. JavaScript中函数四种调用模式

    目录 JS中函数的四种调用模式 函数调用模式 方法调用模式 构造器调用模式 上下文调用模式 JS中函数的四种调用模式 在函数的调用模式中感觉最大的区别就是: this指向 函数调用模式 即通过函数名直 ...

  2. JavaScript高级第2天:定义函数的三种方式、函数的原型链结构、完整原型链、作用域以及作用域链、函数的四种调用模式、闭包、计数器、斐波那契数列优化、三种继承方式

    JavaScript高级第二天 01-定义函数的三种方式 1.函数声明 function:可以先调用再声明,因为预解析(把函数声明.变量声明进行提升) function fn() {//函数体conl ...

  3. Javascript四种调用模式中的this指向

    第一种:函数直接调用执行的模式 function add(a,b){ console.log(this); return a+b; } add(1,2) //this===window 这里的this ...

  4. JavaScript中的“ this”关键字

    JavaScript'this'关键字 (JavaScript 'this' keyword) The this keyword is widely used in JavaScript. It ha ...

  5. JavaScript中的“ new”关键字是什么?

    最初遇到JavaScript时, new关键字可能会造成很大的混乱,因为人们倾向于认为JavaScript并非面向对象的编程语言. 它是什么? 它解决什么问题? 什么时候合适,什么时候不合适? #1楼 ...

  6. Action中取得request,session的四种方式

    Action中取得request,session的四种方式 在Struts2中,从Action中取得request,session的对象进行应用是开发中的必需步骤,那么如何从Action中取得这些对象 ...

  7. Android中Activity的四种启动模式

    每次看到这种专有词汇都十分佩服创造者的智慧,创造者一定和我一样都中二,我已然确信. 我写博客的目的,就是希望不断磨练自己,让自己能够不将一件简单的事情讲的复杂,让自己能将一件复杂的事情讲的简单.嘛嘛, ...

  8. tp5类的属性不存在_thinkPHP5.1框架中Request类四种调用方式示例

    本文实例讲述了thinkPHP5.1框架中Request类四种调用方式.分享给大家供大家参考,具体如下: 1. 传统调用 访问方式:http://127.0.0.1/demo/demo3/test?n ...

  9. xlsx表格怎么筛选重复数据_excel表格如何筛选重复数据 在Excel表格的两列数据中提取不重复值的四种方法...

    excel表格如何筛选重复数据 在Excel表格的两列数据中提取不重复值的四种方法,最近到了季度汇报的时候,掌握一手excel技能在此刻显得多么重要,为了是你的excel看起来更高大上,今天教大家设置 ...

最新文章

  1. 1094 The Largest Generation
  2. maven实战笔记-12
  3. java中split以“.“ 、“\“、“|”分隔
  4. OpenCV学习笔记(十五):图像仿射变换:warpAffine(),getRotationMatrix2D()
  5. web.config文件访问物理路径_计算机操作系统学习笔记(五):文件管理
  6. 程序员curd编程是什么_为什么许多程序员讨厌结对编程?
  7. C#开发的程序性能比Vb.net开发的同样功能的程序性能要高?
  8. Makefile.am详解
  9. 《Java就业培训教程》_张孝祥_书内源码_07
  10. SQL语句生成器 V2.0
  11. springboot项目基础骨架搭建并完成基本增删改查及多种形式分页
  12. antd form validateFields的校验指定元素
  13. 物流学哪方面计算机知识,物流说丨物流专业的毕业生应该具备的6大技能
  14. 宝塔linux面板ping网址找不到主机,云服务器安装宝塔面板后无法ping通ip地址问题的解决方法...
  15. 滴水中级线上班完整版
  16. 生成订单核销二维码,扫码完成核销
  17. 机器人行业五大趋势:中国成为机器人投资狂热爱好者
  18. fitbit charge hr 安装体验
  19. 电脑一键重装系统后连不上远程了?教你设置的方法
  20. Dockerfile 构建镜像以及镜像优化的方法

热门文章

  1. 网络限流linux,DockOne微信分享(一九八):容器网络限流实践
  2. python出现Unresolved import:库名,已解决
  3. 20210408:力扣(二分查找法的两种写法以及变体题目)
  4. 怎么用html做随机颜色,JavaScript 实现网站标签随机颜色的方法
  5. mysql sql时间比较_mysql和sql时间 字段比较大小的问题
  6. 在线解压rar_解压指南!新手必看
  7. 电信移动联通广电喜提5G牌照,5G手机明年爆发
  8. 苹果三星业绩比惨:iPhone营收降17%,三星手机运营利润降40%
  9. (10)Microsoft office Word 2013版本操作入门_word表格
  10. 一步一步使用 DialogFragment 封装链式调用 Dialog