- 浏览: 183506 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
w547377507:
注册账号来赞你!
Bootstrap 源码解析 -
xyixiaochuan:
// IIFE - Immediately Invok ...
IIFE -
jozo:
[color=orange][/color]
Quickling技术 -
raoyutao:
...
Bootstrap 源码解析 -
springmvc-freemarker:
bootstrap demo实例教程源代码下载:http:// ...
Bootstrap 源码解析
this的8种使用场景
// 1. Basic this function foo() { return this; } foo(); // 2. (function(){ return this; })() (function(){ 'use strict'; return this; })() // 3. Object this var a = { name: 'suqing', getContext: function(){ return this; } } a.getContext() // 4. Constructor this function Friend(area, favLan){ this.area = area; this.favLan = favLan; this.context = this; } var frnd1 = new Friend( 'client', 'js'); frnd1.context; // 5. Get this from the chain var dad = { fatherName: 'Dad' } var child = Object.create(dad); child.whoIsYourDad = function(){ return this.fatherName; } child.whoIsYourDad(); // 6. bind, call, apply function getMenu(){ return this; } var devMenu = { menu: 'pizza' }; var forDev = getMenu.bind(devMenu); forDev(); var forTester = getMenu.call(devMenu); forTester (); var forLeader = getMenu.apply(devMenu); forLeader (); // 7. setTimeout // 8. DOM
下面代码为Chrome Console输出
this
this
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
window
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
this === window
true
var myVar = 'my Day';
undefined
myVar
"my Day"
this.myVar
"my Day"
window.myVar
"my Day"
var a = {}
undefined
a.name = 'suqing'
"suqing"
var a = { name: 'suqing', context: this }
undefined
a.context
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
a.context === window
true
function foo(){ // something }
undefined
foo()
undefined
foo.trueExpertise = 'beginner';
"beginner"
foo.trueExpertise
"beginner"
foo.this
undefined
function whatIsThis(){ return this; }
undefined
whatIsThis()
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
(function(){ return this; })()
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
(function(){ 'use strict'; return this; })()
undefined
(function(self){ 'use strict'; return this; })(this)
undefined
(function(self){ 'use strict'; return self; })(this)
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
对象的this
var a = { name: 'suqing', getContext: function(){ return this; } }
undefined
a.getContext()
Object {name: "suqing", getContext: function}
var d = { name: 'yefeng' }
undefined
d.getContext = a.getContext
function (){ return this; }
d.getContext()
Object {name: "yefeng", getContext: function}
var foo = a.getContext
undefined
foo
function (){ return this; }
foo()
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
a.getContext()
Object {name: "suqing", getContext: function}
d.getContext()
Object {name: "yefeng", getContext: function}
foo()
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
var foo = a.getContext
undefined
foo()
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
构造器
function Friend() { this.area = area; this.favLan = favLan; this.context = this; }
undefined
function Friend(area, favLan) { this.area = area; this.favLan = favLan; this.context = this; }
undefined
var frnd1 = new Friend('client','js')
undefined
frnd1.context
Friend {area: "client", favLan: "js", context: Friend}
var frnd2 = new Friend('server','java')
undefined
frnd2.context
Friend {area: "server", favLan: "java", context: Friend}
Friend('server', 'java')
undefined
prototype链
var dad = { fatherName: 'Dad' }
undefined
var child = Object.create(dad)
undefined
child.fatherName
"Dad"
child.whoIsYourDad = function(){ return this.fatherName; }
function (){ return this.fatherName; }
child.whoIsYourDad()
"Dad"
参数this
function getMenu(){ return this; }
undefined
var devMenu = { menu: 'pizza' }
undefined
var forDev = getMenu.bind(devMenu)
undefined
forDev()
Object {menu: "pizza"}
var hrMenu = { menu: 'salad' }
undefined
var forHR = getMenu.bind(hrMenu)
undefined
forHR()
Object {menu: "salad"}
getMenu.call
function call() { [native code] }
getMenu.apply
function apply() { [native code] }
getMenu.apply(hrMenu)
Object {menu: "salad"}
getMenu.call(hrMenu)
Object {menu: "salad"}
setTimeout
var a = { getContext: function(){ setTimeout( function(){ console.log(this); }, 10) } }
undefined
a.getContext()
undefined
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
var a = { getContext: function(){ setTimeout( function(){ console.log(this); }, 4000) } }
undefined
a.getContext()
undefined
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
DOM event handler
document.getElementById('s_rp_words').addEventListener('click', function(){ console.log(this); })
undefined
- <span id="s_rp_words" class="s-rp-words">…</span>
发表评论
-
前端模块化
2014-04-21 17:26 1577前端模块化解决什么 ... -
JS递归
2014-04-18 09:06 0var factorial = (functio ... -
requirejs
2014-04-15 14:07 0http://blogs.telerik.com/kend ... -
关于前端线上故障
2014-04-11 11:32 1233先说明一点,对于故障的认识: 任何事情都是团队的事情,不 ... -
又到一周 周报时
2014-04-11 11:06 1098先说个段子: 公司有个技术牛人,某产品专员向他提单,牛人 ... -
Web应用的组件化开发(二)
2014-04-10 17:29 0Web应用的组件化开发(二) 管控平台 在上一篇中我 ... -
旋转表格的标题
2014-04-09 22:16 0最近做项目的后台管理遇到这样一个问题,表头的属性又多又长, ... -
关于字体大小适配:根文档使用px,组件使用rem,文本元素使用em
2014-04-09 22:10 7638rem是一个非常酷的CSS3属性,它相对于根元素<h ... -
关于字体大小适配:根文档使用px,组件使用rem,文本元素使用em
2014-04-09 21:50 0rem是个非常酷的css属性,我准备将所有的尺寸都用它做单位 ... -
Bootstrap 源码解析
2014-04-03 10:12 31391、Bootstrap的作用域 2、Bootstrap的 ... -
IIFE详解
2014-03-31 20:39 2594介绍IIFE; IIFE的性能; 使用IIFE的好处 ... -
消除每个页面都加载KindEditor
2014-03-13 16:05 0如果a页面需要使用KindEditor,a.html引入k ... -
导航折叠展开
2014-03-13 12:01 0// 导航展开/收起,基于bs.collapse ... -
富文本
2014-03-12 19:44 0var editor2 KindEditor.r ... -
从 开始日期 到 结束日期
2014-03-12 19:28 0<div class="input-gro ... -
KUI:CSS实现radio按钮样式
2014-03-12 17:54 0<ul class="radio-btn& ... -
咦。。。
2014-03-11 16:28 0咦。。。 -
工程师,请优化你的代码
2014-03-11 15:02 0jQuery ready事件 DOM操作 事件处理 ... -
PhantomJS
2014-02-20 11:41 914这里下载,如果下载不了到这个备份下载v1.9.7 ... -
SPM处理方案
2014-01-20 14:54 0SPM处理方案
相关推荐
深度理解js中this的指向问题
NULL 博文链接:https://wv1124.iteye.com/blog/505236
深化理解Javascript中this的作用域_.docx
两句话理解js中的this2017 年 11 17前: 直都搞不清javascript中this的指向,你不知道的javascript(上卷)这本书中有3章都是
深入理解JavaScript系列(13):This? Yes, this! 深入理解JavaScript系列(14):作用域链(Scope Chain) 深入理解JavaScript系列(15):函数(Functions) 深入理解JavaScript系列(16):闭包(Closures) ...
本文将介绍 JavaScript 中 this 的用法,从而帮助开发者更好地理解并掌握 this 的使用。 一、在全局作用域中使用 this 在全局作用域中使用 this 会返回全局对象,在浏览器环境下是 window 对象, 在 Node.js 环境...
本文结合网络收集整理,尝试以一种简易的方式阐述JavaScript中this的用法,希望对大家关于JavaScript中this用法的快速理解有所帮助。正文1. this用法实例 代码如下:window.color = “red”; var o = { color: “blue...
深度解析 和this
JavaScript中this的指向还没搞明白?来这看看 你就懂啦~
高手详解javascript中的this指针
详解Javascript 中的this指针
Javascript 中 this指向
深入理解JavaScript系列(13):This Yes this 深入理解JavaScript系列(14):作用域链 Scope Chain 深入理解JavaScript系列(15):函数(Functions) 深入理解JavaScript系列(16):闭包(Closures) 深入...
js原生态函数中使用jQuery中的 $(this)无效的解决方法.docx
this指触发事件的对象,接下来为大家分享下javascript中onclick(this)的用法,感兴趣的朋友可以参考下哈,希望对你有所帮助
JavaScript中this的使用,简单理解,快速学会
对大多数有OOP开发经验的开发人员来说this是当前作用域中引用普通元素的标识符,但是在Javascript中它却显得古灵精怪的,因为它不是固定不变的,而是随着它的执行环境的改变而改变。在Javascript中this总是指向调用...
js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解
this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。 1、纯粹函数调用。 function test() { this.x = 1; alert(x); } test(); ...