了解神奇的this
this的用法
在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了.
因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下环境.举例说明
1. 构造函数之this
function Foo() {
this.name = "zhangsan";
this.age = 20;
console.log(this);
}
var f1 = new Foo();
说明:
1. 如果函数作为构造函数使用,那么其中的this就代表它new出来的对象
2. 如果函数作为普通函数调用,这种情况this是指window.
function Foo() {
this.name = "zhangsan";
this.age = 20;
console.log(this);
}
Foo();
console.log(window.name);
console.log(window.age);
2. 函数作为对象的一个属性
如果函数作为对象的一个属性时,并且作为对象的一个属性被调用时,函数中的this指向该对
var obj = {
x:10,
fn:function() {
console.log(this.x);
}
};
obj.fn();
var obj = {
x:10,
fn:function() {
console.log(this.x);
}
};
var obj1 = {
x:20
};
obj1.fn = obj.fn;
obj1.fn();
3. 函数用call或apply调用
当一个函数被call和apply调用时,this的值就去传入的对象的值
var test = "Tony";
function doSomething() {
console.log(this.test);
}
var obj = {
test:"Tom"
};
doSomething();
doSomething.call(obj);//doSomething中的this指向obj
4. 全局&普通函数的调用
在全局环境下,this指向的是window对象
console.log(this === window);//true
普通函数调用时,其中的this也是指向的window对象
var x = 10;
var fn = function() {
console.log(this);//window
console.log(this.x);//10
};
fn();
注意以下情况:虽然函数f是在obj对象内部定义的,但是他任然是一个普通函数,this指向的还是window对象.
var x = 20;
var obj = {
x:10,
fn:function() {
function f() {
console.log(this);
console.log(this.x);
}
f();
}
};
obj.fn();
5. 构造函数prototype
this代表的是当前对象的值,不仅仅是在构造函数的prototype,即便是在整个原型链中.
function Fn(name, age) {
this.name = name;
this.age = age;
}
Fn.prototype.sayName = function() {
console.log(this.name);
};
var f1 = new Fn("zhangsan", 20);
console.log(f1.name);
了解神奇的this的更多相关文章
- BZOJ 1006 【HNOI2008】 神奇的国度
题目链接:神奇的国度 一篇论文题--神奇的弦图,神奇的MCS-- 感觉我没有什么需要多说的,这里简单介绍一下MCS: 我们给每个点记录一个权值,从后往前依次确定完美消除序列中的点,每次选择权值最大的一 ...
- 前端精选文摘:BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
- MVC系列——MVC源码学习:打造自己的MVC框架(四:了解神奇的视图引擎)
前言:通过之前的三篇介绍,我们基本上完成了从请求发出到路由匹配.再到控制器的激活,再到Action的执行这些个过程.今天还是趁热打铁,将我们的View也来完善下,也让整个系列相对完整,博主不希望烂尾. ...
- 一行神奇的javascript代码
写本篇文章的缘由是之前群里@墨尘发了一段js代码,如下: (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~ ...
- [翻译svg教程]Path元素 svg中最神奇的元素!
先看一个实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 ...
- php isset( $test ) 的神奇之处。
很久一段时间没更新博客了,由于近段时间一直在忙 挑战杯 的项目,所以没怎样把一些总结放上来.这次,总结下 php 的一个 函数 : boolean isset($test), 返回值:boolean类 ...
- 神奇的CSS3按钮特效
点击这里查看效果 以下是源代码: <!doctype html> <html> <!-- author: @simurai --> <head> < ...
- 吉特仓库管理系统- 斑马打印机 ZPL语言的腐朽和神奇
上一篇文章说到了.NET中的打印机,在PrintDocument类也暴露一些本质上上的问题,前面也提到过了,虽然使用PrintDcoument打印很方便.对应条码打印机比如斑马等切刀指令,不依赖打印机 ...
- JS开发HTML5游戏《神奇的六边形》(一)
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...
- 神奇的sort()函数
今天来谈一谈sort()函数,sort() 方法用于对数组的元素进行排序,用法为arrayObject.sort(sortby):括号中的为可选参数,准确来说应该是一个函数,这个函数用来规定排序方法, ...
随机推荐
- C++ 常见容器
迭代器. 基本介绍(来源于网络):迭代器是一种抽象的概念.能够遍历容器内的 部分/全部 元素.每个迭代器中包含着元素的地址. 它可以将 抽象容器 和 泛型算法 结合起来. 大致原理: 1)迭代器 ...
- [makefile] filter-out
$(filter-out ,) 名称:反过滤函数——filter-out.功能:以模式过滤字符串中的单词,去除符合模式的单词.可以有多个模式.返回:返回不符合模式的字串.示例: objects=mai ...
- php number_format()保留小数点后几位有效数的函数 千位分组来格式化数字(转)
PHP保留小数点后2位的函数number_format number_format(带小数点的书,小数点后保留的位数) number_format(8.3486,2); //取得小数点后2位有效数/ ...
- UVA 10943 How do you add?
设函数 f(k)(n); 则: f(1)(n)=1; f(2)(n)=f(1)(0)+f(1)(1)+f(1)(2)+...+f(1)(n); f(3)(n)=f(2)(0)+f(2)(1)+f(2) ...
- Azure File SMB3.0文件共享服务(5)
使用Java管理Azure文件共享服务 Azure文件共享服务提供了多种方式的访问接口,包括Powershell,.Net, Java, Python等等,本章主要介绍如何使用Java来访问A ...
- Android中Handle详解
上图为本人总结的Handler,网上发现一片总结很好的博客就copy过来:作为参考 Handler有何作用?如何使用? 一 .Handler作用和概念 包含线程队列和消息队列,实现异步的消息处理机制, ...
- Android网络编程概述
Android网络编程概述 首先,应该了解的几个问题: 1)Android平台网络相关API接口 a) java.net.*(标准Java接口) java.net.*提供与联网有关的类,包括流.数据包 ...
- TCP和HTTP
TCP和HTTP 2013-11-01 11:29 6564人阅读 评论(2) 收藏 举报 分类: 计算机—杂七杂八(15) 1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议, ...
- 【Leetcode】二叉树简单路径最大和问题
问题一:二叉树任意两个叶子间简单路径最大和 示例: -100 / \ 2 100 / \ 10 20 思路:这个问题适用于递归思路. 首先,将问题简单化:假设包含最大和summax的简单 ...
- [转载]CTO和技术总监区别
原文地址:http://blog.sina.com.cn/s/blog_6024cfa90101cb0h.html 技术总监(Chief Technical Officer)与CTO(Chief Te ...