JavaScript中this的四种情况（非严格模式）

1、当this所在函数是事件处理函数时，this指向事件源。
2、当this所在函数是构造函数时，this指向new出来的对象。
3、this所在函数的所属对象是谁，this指向函数所属对象。
4、当this所在函数没有所属对象，this指向window对象

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

          <div id="box" class="box" style="height: 100px; width:100px; background:#f3f3f3;"></div>

    </body>

</html>  

<script type="text/javascript">

//this

//1、当this所在函数是事件处理函数时，this是事件源。

document.getElementById("box").onclick = function(){

 console.log(this); //this就是div.box

}  

//2、当this所在函数是构造函数时，this是new出来的对象。

function Person(name){

    this.name = name;//this就是new出来的对象zhaosi

    console.log(this.name)

    this.eat = function(){

        console.log(this.name+"is eatting");

    }

}

var zhaosi = new Person("赵四");  

// 3、this所在函数的所属对象是谁，this就是谁。

function Person(name){

 this.name = name;//就是new出来的对象liuneng

 this.eat = function(){

     console.log(this.name+"is eatting");;//这个this是谁，谁调用eat，或者说调用eat时，前面的对象是谁，this就是谁

 }

}

var liuneng = new Person("刘能");

liuneng.eat();//这句话执行时，eat函数内部的this就是p1

var laoqi = new Person("老七");

laoqi.eat();//这句话执行时，eat函数内部的this就是p2  

//4、当this所在函数没有所属对象，this是window对象。全局变量都是window对象的属性。

function test(){

    console.log(this);//这个this就是window

}  

test();//window对象可以省略，所以，这句话就等价于window.test();  

//全局变量是window对象的属性

var t = "大脚";  

console.log(window.t);  

var obj = {

    name:"李四"

}  

console.log(window.obj.name);  

//this转移是经常碰到的问题

//1)、注意区分this所在函数调用时的隶属对象

//2)、如果不希望被this折磨可以选用ES6中的箭头函数。  

</script>

从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况的更多相关文章

  1. js中this指向的三种情况

    js中this指向的几种情况一.全局作用域或者普通函数自执行中this指向全局对象window,普通函数的自执行会进行预编译,然后预编译this的指向是window //全局作用域 console.l ...

  2. Jquery 中Ajax使用的四种情况

    <script type="text/javascript" language="javascript" src="JS/jquery-1[1] ...

  3. 对存在JavaScript隐式类型转换的四种情况的总结

    一般存在四种情况,JavaScript会对变量的数据类型进行转换. 目录 * if中的条件会被自动转为Boolean类型 * 会被转为false的数据 * 会被转为true的数据 * 参与+运算都会被 ...

  4. 关于计算机学习的书（doc,mobi,epub,pdf四种格式）

    关于计算机学习的书(doc,mobi,epub,pdf四种格式) <html> <body> <div> 21天学通C+ +2016/6/22 18:47文條 30 ...

  5. js中判断数据类型的四种方法总结

    js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...

  6. mysql中模糊查询的四种用法介绍

    下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] ...

  7. JAVA中集合输出的四种方式

    在JAVA中Collection输出有四种方式,分别如下: 一) Iterator输出. 该方式适用于Collection的所有子类. public class Hello { public stat ...

  8. JS去除数组中重复值的四种方法

    JS去除数组中重复值的四种方法 1 /// <summary>            o[this[i]] = "";  }      }       newArr.p ...

  9. try catch finally 中包含return的几种情况，及返回结果

    当当当,兴致勃勃的第二篇博客,散花~ 下面是正题(敲黑板) 第一种情况:在try和catch中有return,finally中没有return,且finally中没有对try或catch中要 retu ...

随机推荐

  1. python做语音信号处理

    音频信号的读写.播放及录音 标准的python已经支持WAV格式的书写,而实时的声音输入输出需要安装pyAudio(http://people.csail.mit.edu/hubert/pyaudio ...

  2. node中的favicon.icon请求

    var http=require("http"); var server=http.createServer(); server.on("request", c ...

  3. .NET自带IOC容器MEF之初体验(转)

    本文主要把MEF作为一种IOC容器进行讲解,.net中可用的IOC容器非常多,如 CastleWindsor,Unity,Autofac,ObjectBuilder,StructureMap,Spri ...

  4. Chrome Postman及Firefox Poster使用

    Chrome浏览器跟Postman工具共用代理设置及Cookie Firefox浏览器跟Poster工具共用代理设置及Cookie   xdebug调试原理 第一次请求url通过参数XDEBUG_SE ...

  5. BIOS设置图解教程-看完就没有不明白的了

    BIOS(基本输入/输出系统)是被固化在计算机CMOS RAM芯片中的一组程序,为计算机提供最初的.最直接的硬件控制.BIOS主要有两类∶AWARD BIOS和AMI BIOS.正确设置BIOS可大大 ...

  6. 爬虫的三种解析方式(正则解析, xpath解析, bs4解析)

    一 : 正则解析 : 常用正则回顾: 单字符: . : 除换行符以外的所有字符 [] : [aoe] [a-w] 匹配集合中任意一个字符 \d : 数字 [0-9] \D : 非数字 \w : 非数字 ...

  7. 查看win激活状态的命令

    查看win激活状态的命令  1.键盘按下win+R 运行输入如下命令即可. 2.Win+R===>输入 slmgr.vbs -dlv   显示:最为详尽的激活信息,包括:激活ID.安装ID.激活 ...

  8. 系统架构设计方法论——TOGAF

    https://blog.csdn.net/watermelonbig/article/details/77620847 1.ADM的架构开发阶段 ADM方法是由一组按照架构领域的架构开发顺序而排列成 ...

  9. Python 格式化输出 ( 颜色 )

    简介: Python 中如果想让输出有颜色显示,实现起来还是挺容易的,你需要拥有 termcolor 的知识! 参考地址:https://pypi.python.org/pypi/termcolor/ ...

  10. Agile1001社区10月份活动：一张图解读企业级产品思维

    活动信息 主题:一张图解读企业级产品思维 地点:北京市海淀区苏州街3号大恒科技大厦南座4层 时间: 2017-10-15 14:00 - 17:00 报名链接:http://www.hdb.com/p ...