JavaScirpt(JS)的this细究
一、js中function的不同形态
js中类和函数都要通过function关键字来构建。
1、js中当函数名大写时,一般是当作类来处理
function Foo(name, age) {
this.name = name;
this.age = age;
this.getName = function () {
console.log(this.name)
}
} obj = new Foo('文州', 19); // 实例化一个对象
obj.getName(); // 输出:文州
2、js中函数名小写,当做函数来处理
function test() {
console.log(this);
}
// 等同于window.test,因此这里的this代指的是window
test(); // 输出:Window
3、自执行函数,同上面等价
自执行函数,同上面等价,this也是代指的window。
(function () {
console.log(this); // 输出:Window
})()
二、复合案例
1、类和函数结合案例
var name = '景女神';
function Foo(name, age) {
this.name = name;
this.age = age;
this.getName = function () {
console.log(this.name); // 文州
(function () {
console.log(this.name); // 景女神(打印的外部全局变量)
})()
}
} obj = new Foo('文州', 19);
obj.getName(); // 文州 景女神
生成对象后,对象执行getName方法,此时this.name是输出的当前对象的name,因此是输出文州。随后再执行自执行函数,这里的this指代的是window对象,获取全局name变量,因此输出景女神。
2、让上例中自执行函数也打印对象的name
var name = '景女神';
function Foo(name, age) {
this.name = name;
this.age = age;
this.getName = function () {
console.log(this.name); // 文州
var that = this;
(function () {
console.log(that.name); // 文州(打印的外部全局变量)
})()
}
} obj = new Foo('文州', 19);
obj.getName(); // 文州 文州
3、自动实例化案例
obj = {
name: '文州',
age: 19,
getName:function () {
console.log(this.name); // 文州
var that = this;
(function () {
console.log(that.name); // 文州
})()
}
}
obj.getName();
JavaScirpt(JS)的this细究的更多相关文章
- JavaScirpt(JS)——js介绍及ECMAScript
一.JavaScript历史发展 JavaScript语言的历史:http://javascript.ruanyifeng.com/introduction/history.html 1994年12月 ...
- JavaScirpt(JS)——DOM文档对象模型
一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...
- JavaScirpt(JS)——BOM浏览器对象模型
一.BOM概念 BOM(Browser Object Model)即浏览器对象模型.可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关 ...
- python全栈开发之路
一.Python基础 python简介 python数据类型(数字\字符串\列表) python数据类型(元组\字典) python数据类型(集合) python占位符%s,%d,%r,%f prin ...
- javascirpt对象运用与JS变量
abcdefghijklmnopqrstuvwyz String 对象方法 charAt() 方法可返回指定位置的字符.stringObject.charAt(index)(index从0开始)[ht ...
- [Javascirpt] Developer-friendly Flow Charts with flowchart.js
Flowchart.js is a great tool for creating quick, simple flowcharts in a way that keeps you out of a ...
- js javascirpt 数学库、 算法库 (转载)
提示:国外官网,谷歌浏览器右键可以翻译成中文. 1.math.js 官网:https://mathjs.org/index.html 其它简介:https://www.jianshu.com/p/4f ...
- javascirpt怎样模仿块级作用域(js高程笔记)
因为javascript没有块级作用域的概念,所以在块语句中定义的变量,实际上是在包括函数中而非语句中创建的. 如: function outputNumbers(count){ for(var i= ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...
随机推荐
- [Beta阶段]第一次Scrum Meeting
Scrum Meeting博客目录 [Beta阶段]第一次Scrum Meeting 基本信息 名称 时间 地点 时长 第一次Scrum Meeting 19/04/29 大运村寝室6楼 70min ...
- Kibana6.x.x源码分析--JavaScript中 "!~" 这样的符号是啥意思?
看到源码中有一段JS代码不太懂,如下: 里面这个 "!~" 符号看到后有点儿方啊O__O "…,毛线意思? [查资料,解释如下]: indexOf returns -1 ...
- poj1182 食物链 带权并查集
题目传送门 题目大意:大家都懂. 思路: 今天给实验室的学弟学妹们讲的带权并查集,本来不想细讲的,但是被学弟学妹们的态度感动了,所以写了一下这个博客,思想在今天白天已经讲过了,所以直接上代码. 首先, ...
- HDU - 2147 博弈 P/N分析
结论题,很显然和奇偶有关 PS.尝试用dfs写出PN表写崩了 #include<iostream> #include<algorithm> #include<cstdio ...
- Codeforces - 631B 水题
注意到R和C只与最后一个状态有关 /*H E A D*/ struct node2{ int kind,las,val,pos; node2(){} node2(int k,int l,int v,i ...
- Linux(1)-CentOS7下解决ifconfig command not found
第一步: 输入ip addr 确认IP地址是否设置正常,设置好如下所示,如果没有获取到IP地址则设置一个即可. 第二步 确认sbin目录是否存在. cd /sbin 第三步 确认ifconfig命令是 ...
- [转] JAVA从本机获取IP地址
[From] https://www.cnblogs.com/xiaoBlog2016/p/7076230.html 论述: 此篇博客是在工作的时候,需要获得当前网络下面正确的ip地址,在网上查阅很多 ...
- 在Eclipse中调试web项目
由于现在的公司用的是Eclipse开发web项目而且不安装MyEclipse插件,没有myclipse插件就不能在Eclipse中配置web服务器,所以也就不好对web项目进行调试.下面的方法就可以让 ...
- Mina入门demo
初识Mina,简要记录理解内容和实现demo. 这里先简述一下BIO和NIO的区别: 同步阻塞IO(BIO):一个连接一个线程,客户端有连接请求时服务器端就需要启动一个线程进行处理,如果这个连接不做任 ...
- MVC JSON JavaScriptSerializer 进行序列化或反序列化时出错
MVC control中返回json格式数据一般都是如下格式 [HttpPost] public ActionResult CaseAudit(string name) { var data =&qu ...