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. UE4 代码总结

    1.创建关卡类 1.创建C++类继承LevelScriptActor 2.打开关卡蓝图 Class Settings->Parent Class 选择你之前创建好的C++类 遇到的问题: 1.T ...

  2. SQL Server 2005/2008压缩数据库日志的方法

    适用于SQL Server 2005的方法 Backup Log DNName WITH no_log GO DUMP TRANSACTION DNName WITH no_log GO USE DN ...

  3. ALSA声卡笔记4-----体验声卡

    1 .配置内核支持UDA1341 (1)内核 解压内核并打上补丁 配置内核 platform 需要设置哪些配置项,先看一下platform,需要把S3c24xx-i2s.c文件配置上去,dma.c也要 ...

  4. 【BZOJ】4721: [Noip2016]蚯蚓 / 【洛谷】P2827 蚯蚓(单调队列)

    Description 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」=[3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳 蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀手来帮 ...

  5. JAVA构造函数在超类与子类定义鲁波总结

    1.子类无构造函数,超类无构造函数,创建的无参数的对象: 编译通过. class A { } class B extends A { } public class Testeeer { public ...

  6. java实现时钟

    package com.js.ai.modules.pointwall.testxfz; import java.awt.Color; import java.awt.Dimension; impor ...

  7. CentOS7.6安装Redis

    官网下载地址:https://redis.io/download 第一步:软件下载安装 进行安装目录:cd /opt/software (如果目录不存在,请先创建目录) 下载二进制包:wget htt ...

  8. jstack来分析linux服务器上Java应用服务性能异常

    使用jdk自带的jstack来分析linux服务器上应用服务性能异常: 1.top查找出哪个进程消耗的系统资源情况 [op1@jira ~]$ top top - 19:23:43 up 22 day ...

  9. TextBox 设置数据源的自动补全输入字符串功能

    这个东西首先说明是不是自己原创,但是比较简单.所以讲起分享如下.主要是用到TextBox的自动补全属性,这个东西虽然自己以前经常用TextBox,但是补全从没接触过. 关键代码是在窗体载入时加载如下代 ...

  10. oracle对表常用的操作

    最近业务需要给表添加索引,因为数据量很大时,查询效率很低:老大建议使用索引: 之前总结的时候将索引没有记录,当然啦,也怪笔者基础薄弱,不管了,慢慢进步嘛,好了进入正题吧! 首先准备工作,先建两个临时表 ...