javascript中,对于this指向的浅见
# this的指向在函数创建的时候确定不了。只有在执行的时候,才可以确定。
## 1 、 这里的this指向window window.fn(); 所以this.user是undefined
function fn (){
var user='追梦人';
console.log(this.user); // undefined
console.log(this); // window
}
fn();
## 2、谁调用,指向谁
var o ={
user:'追梦人',
fn:function(){
console.log(this.user); // 谁调用,指向谁
}
}
o.fn();
## 3、
var o ={
user:'追梦人',
fn:function(){
console.log(this.user); // 为什么不是undefiend,是window在调用
}
}
window.o.fn(); // 谁调用,指向谁
## 4、
var o={
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //
},
},
}
o.b.fn();
- - 如果函数中有this,但是他没被上一级的对象所跳用,这时this指向window
- - 如果函数中有this,并且这个函数被上一级对象所调用,这时this指向上一级的对象
- - 如果函数中有this,而且这个函数内部有多个对象,尽管这个函数被最外层所调用,
- - 但是this的指向也只是他的上一级对象。
- - 严格模式中,this不指向window,而是undefined
## 5、 注释掉a:12 this.a为 undefined
var o={
a:10,
b:{
//a:12,
fn:function(){
console.log(this.a);
},
},
}
o.b.fn();
- - 尽管对象b中,没有属性a,但是这个this也是指向对象b,因为this只会指向
- - 它的上一级对象,不管该对象有没有a
## 6、this指向的永远都是最后调用它的对象(执行的时候,谁调用)
var o={
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); // undefined
console.log(this); // window
},
},
}
var fn=o.b.fn; // 注意:这里并没有执行
fn(); // 执行fn
- - 注意:虽然,函数中的fn被对象b所引用,但是在赋值的时候,并没有执行,
- - 所以最终的指向是window
- - 上面的例子不同,因为上面的例子直接执行了fn()
## 7、构造函数中的this
function Fn(){
this.user="追梦人";
}
var fn = new Fn();
console.log(fn.user);
- - 之所以对象a可以用函数Fn中的uesr,是因为new关键字改变了this的指向。
- - new 关键字创建了一个对象实例, 相当于复制了一份Fn到对象a中。
- - 此时,只是创建,没有执行。
- - 最后调用的是fn,那么this指向自然是fn
- - 首先,new关键字会创建一个空对象
- - 然后会自动调用一个函数的apply方法,将this指向这个空对象,这样函数内部的this就会被这个空对象所替代。
- - bind apply(数组) call
## 8、构造函数 return 对象 的时候
function Fn(){
this.user="追梦人";
return {} // 返回 一个对象
}
var fn = new Fn();
console.log(fn.user); // undefined
- - 返回一个对象的时候,this会指向返回的对象
## 9、return 简单类型的数据
function Fn(){
this.user="追梦人";
return 1; // 返回的是一个简单类型
}
var fn = new Fn();
console.log(fn.user); // 追梦人
- - 返回简单类型数据,this还是指向函数的实例
## 10、return null的时候
function Fn(){
this.user="追梦人";
return null; // 返回的是一个简单类型
}
var fn = new Fn();
console.log(fn.user); // 追梦人
- - 注意:返回null虽然是个对象,this还是指向函数的实例,null特殊
javascript中,对于this指向的浅见的更多相关文章
- javascript中this的指向
作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...
- Javascript中的this指向。
一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...
- JavaScript中 this 的指向
很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...
- 前端面试之JavaScript中this的指向【待完善!】
JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...
- JavaScript中的this指向
this是谁 技术一般水平有限,有什么错的地方,望大家指正. this代指当前对象super调用父类的构造函数,应表会运网数物,加载驱动建立链接执行SQL处理结果,直到现在每想起这三点就能想起我上大学 ...
- Javascript 中的this 指向的对象,你搞清楚了吗?
Javascript 中的this 总让人感到困惑,你能分清以下三种test1(),test2(),test3() 情况下的输出吗? 注:以下Javascript运行环境中为浏览器 //1 this在 ...
- javascript中的this指向问题
在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的 ...
- 谈谈 JavaScript 中的 this 指向问题
JavaScript 中的 this 为一个重难点,它不像静态语言 C#.Java 一样,就表示当前对象.而在 JS 中, this 是运行时确定,而并非定义时就已确定其值. 谈起 this ,必须少 ...
- JavaScript中this的指向问题
this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑 ...
- 轻松几句搞定【Javascript中的this指向】问题
this关键字在JavaScript中扮演了至关重要的角色,每次它的出现都伴随着它的指向问题,这也是很多初学者容易出错的地方. 不过,这篇文章将会带你一次性搞定this指向的问题,望能给大家提供帮助! ...
随机推荐
- HTTP必知必会
HTTP协议作为网络传输的基本协议,有着广泛的应用.HTTP协议的完整内容很多,但是其核心知识却又简单精炼.学习者应该掌握其基本结构,并且能够举一反三.这篇文章所列的,就是在实际开发中必须知道必须掌握 ...
- The Amazing ProgressBar Control(转)
好久没写博客了,今天就先转一篇,随后可以再写些~~~ 直接把原文粘过来,就不再进行翻译和个人说明了,因为效果很COOL~ The Amazing ProgressBar Control A progr ...
- 第 19 章 CSS 其他样式
学习要点: 1.颜色和透明度 2.盒子阴影和轮廓 3.光标样式 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 其他剩下几个常用的样式,包括颜色.透明度.盒子的阴影轮廓以及光标的样式. 一.颜 ...
- NYOJ 746---整数划分(四)(区间DP)
题目链接 描述 暑假来了,hrdv 又要留学校在参加ACM集训了,集训的生活非常Happy(ps:你懂得),可是他最近遇到了一个难题,让他百思不得其解,他非常郁闷..亲爱的你能帮帮他吗? 问题是我们经 ...
- python常用工具小函数-字符类型转换
Python3有两种表示字符序列的类型:bytes和str.前者的实例包含原始的8位值就是的字节,每个字节有8个二进制位:后者的实例包含Unicode字符.把Unicode字符转成二进制数据最常见的编 ...
- nginx+uwsgi 部署 django
预装:nginx, django Django站点tree |Site |-----Blog(自建的项目) |-----Manage.py |-----Site(setting url wsgi-. ...
- orcl的小技巧和分页
1Oracle中查看所有用户语句 select * from dba_users 1.修改用户的密码 alter user 用户名 identified by 密码; 2.如何查询stuInfo表中自 ...
- 25款响应式,支持视网膜显示的 Wordpress 主题
响应式和现代设计风格的多用途 WordPress 主题与能够非常灵活的适应所有设备.而高级主题能够更大可能性的轻松定制.所有的主题是完全响应式的,您可以从主题选项中禁用/启用响应模式. 多用途的响应式 ...
- MontageJS:构建现代 Web App 的 HTML5 框架
MontageJS 可以帮助您构建高可扩展性和可维护性的 HTML5 应用.有了 MontageJS,开发人员可以创建可重用的用户界面组件和模块,组件和控制器之间的绑定属性,并且同步 DOM 查询和更 ...
- kindeditor-在线编辑器
写在前面的话: 今天是第一次写博客,很值得纪念,希望能够和大神们一起交流技术,一起进步...来自<一只有梦想的前端小白> 最近项目中需要实现图文混排的效果,所以研究了下在线编辑器-- ki ...