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 ...
随机推荐
- 将utc时间格式化的代码
/** * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).12小时(h).24小时(H).分(m).秒(s).周(E).季度(q) 可以用 1-2 个占位符 * ...
- 2、开始学习C++
1.创建C++程序 C++程序是严格区分大小写,Cout与COUT都是识别不出来的,下面给出了一段简单的C++程序. #include "stdafx.h" #include &l ...
- 批量改ID 行形式
update [Temp_Sql] set ID(字段) = (274+ID(字段)) 字段+字段形式 可以以行形式批量修改
- Ubuntu16.04更换下载源
更新源的方法 进入/etc/apt/ cd /etc/apt 对 sources.list文件进行备份: sudo cp sources.list sources.list.bak 打开源列表文件 s ...
- 锐速破解版linux一键自动安装包
锐速破解版linux一键自动安装包(5月28日更新) 锐速破解版安装方法: wget -N --no-check-certificate https://github.com/91yun/server ...
- 包括ES6在内的数组操作(待更)
下面是我对ES6和古老的JS(ES3)一些数组操作的总结,附带了一些我曾经用上的. map处有待更内容. 贴一下有借鉴的网站:https://segmentfault.com/a/1190000002 ...
- Android ToggleButton(开关函数)与switch (开关按钮)
1.ToggleButton (1)介绍 (2)组件形状 (3)xml文件设置 <?xml version="1.0" encoding="utf-8"? ...
- DEM反应不收敛问题
之前算DEM反应一直不收敛,后来把计算规模减少到两个固定颗粒,也就是仿照reactive-chemistry和evaperation这两个算例. 目前reactive-chemistry这个算例,把各 ...
- POJ - 3735 循环操作
构造n+1元组,m次方的矩阵代表循环操作 本题尚有质疑之处(清零操作的正确性还有单位矩阵的必要性),题解可能会改正 #include<iostream> #include<algor ...
- Wscript的popup
Dim WSHShell Set WSHShell = WScript.CreateObject("WScript.Shell") WshSHell.popup "枚举主 ...