JS进阶之---this的指向
this到底指向什么地方,决定于函数的调用方式。
1、 指向全局变量 --- 函数被单独调用的时候
function fn() {
console.log( this.a );
}
var a = 2;
fn(); //2 fn单独调用,this引用window
2、 指向某对象 --- 隐式绑定
隐式调用的意思是,函数调用时拥有一个上下文对象
function fn() {
console.log( this.a );
}
var obj = {
a: 2,
fn: fn
};
obj.fn(); //2 this引用obj。
//说明的一点是,最后一个调用该函数的对象是传到函数的上下文对象。如:
function fn() {
console.log( this.a );
}
var obj2 = {
a: 42,
fn: fn
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.fn(); //42 this引用的是obj2.
//还有一点要说明的是,失去隐式绑定的情况,如下:
function fn() {
console.log( this.a );
}
var obj = {
a: 2,
fn: fn
};
var bar = obj.fn; // 函数引用传递
var a = "全局"; // 定义全局变量
bar(); // "全局"
如上,虽然有隐式绑定,但是它执行的效果明显是把fn赋给bar。这样bar执行的时候,依然是函数单独调用,指向全局变量,所以输出结果如上。
3、 指向某对象 --- 显示绑定
通过call()、apply()、bind()。它们接收的第一个参数即是上下文对象,并将其赋给this。
function fn() {
console.log( this.a );
}
var obj = {
a: 2
};
fn.call( obj ); //
如果我们传递第一个值为简单值,那么后台会自动转换为对应的封装对象。如果传递为null,那么结果就是在绑定默认全局变量。
4、 指向类实例
如果是一个构造函数,用new来调用,那么this指向新创建的对象。
function fn(a) {
this.a = a;
}
var bar = new fn( 2 );
console.log( bar.a );//
JS进阶之---this的指向的更多相关文章
- JS 进阶知识点及常考面试题
将会学习到一些原理相关的知识,不会解释涉及到的知识点的作用及用法,如果大家对于这些内容还不怎么熟悉,推荐先去学习相关的知识点内容再来学习原理知识. 手写 call.apply 及 bind 函数 涉及 ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
- web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- Node.js进阶篇-koa、钩子函数、websocket、嵌入式开发
代码地址如下:http://www.demodashi.com/demo/12932.html 一.简介 koa是由Express原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的We ...
- 【 D3.js 进阶系列 — 4.0 】 绘制箭头
转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...
随机推荐
- angularjs学习第七天笔记(系统指令学习)
您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令 系统指令大部分都是以ng开始,这也是为什么在自定义指令命名时不要以ng开始的原因所在 系统指令在学习了分成两个部 ...
- Linux免密码登录设置
Linux免密码登录设置 假设要登录的机器为192.168.1.100,当前登录的机器为192.168.1.101. 首先在101的机器上生成密钥(如果已经生成可以跳过): $ ssh-keygen ...
- [PHP] 数据结构-链表创建-插入-删除-查找的PHP实现
链表获取元素1.声明结点p指向链表第一个结点,j初始化1开始2.j<i,p指向下一结点,因为此时p是指向的p的next,因此不需要等于3.如果到末尾了,p还为null,就是没有查找到 插入元素1 ...
- Java框架之Struts2(一)
在学习Struts2之前,我们要知道Java为什么要有反射机制呢?反射机制可以说是填补Java不能动态访问某一个类的空白.利用反射机制,动态的创建一个对象.动态的访问类的某个属性,而且访问哪一个属性自 ...
- Why is one loop so much slower than two loops?
Question: Suppose a1, b1, c1, and d1 point to heap memory and my numerical code has the following co ...
- callback.js
function writeCode(callback){ console.log("i am waiting....") callback(); console.log(&quo ...
- 【读书笔记】iOS-优化内存
imageNamed:方法创建UIImage对象,这些对象不再使用的时候 会放到应用的默认自动回收池中,而不是当前的事件循环的自动回收池中,这样的对象占用的内存只有在应用结束的时候 才会回收.如果用这 ...
- python之数据类型
1.整数(int)integer 直接写出数字就是整数例: a = 0#查看变量的数据类型 type() -> #<class 'int'> class类,类型,类别print(10 ...
- React 入门学习笔记整理(一)——搭建环境
使用create-react-app脚手架搭建环境 1.安装node .软件下载地址:https://nodejs.org/en/,我下的推荐的版本. 安装之后测试是否安装成功.windows系统下, ...
- [VUE ERROR] Invalid default value for prop "slides": Props with type Object/Array must use a factory function to return the default value
错误原因: 当给子组件设置 props 属性时,如果参数类型是 Array 或 Object ,它的默认值必须是由工场函数返回,不能直接赋值 错误代码: proE: { type: Array, de ...