javascript当中的this详解
总结this的3个规则:
- this是调用上下文,上下文被创建或者初始化时才确定
- 非严格模式:this是全局对象;严格模式:this是undefined
- 函数调用
a. 以函数形式调用的函数通常不使用this关键字,非严格模式下函数调用模式的this就是全局对象。
b. 以方法形式调用的函数的this指的是当前调用方法的对象
c. 以构造函数形式调用的函数的this指的是被构造的对象,具体操作为:
i. 创建一个新对象
ii. 将构造函数的作用域赋给新对象(因此构造函数中的this就指向这个新对象)
iii. 执行构造函数的代码(为这个新对象添加属性,这个时候this才确定下来就是该对象)
iv. 返回新对象
v. 另外要注意的是,构造函数通常不使用return关键字,如果使用,则调用表达式的值就是return的这个对象,如果使用却没有指定返回值,或者返回一个原始值,那么就忽略返回 值,同时使用构造出来的新对象作为返回结果。
4. this是一个关键字,js的语法不允许给this赋值,关键字this没有作用域的限制,嵌套的函数不会从调用它的函数中继承this。即:如果嵌套函数作为方法调用,其this的值指向调用它的对象(与规则3相符合)
如果嵌套函数作为函数调用,其this的值不是全局对象(非严格模式)就是undefined(严格模式)。(与规则2、3符合)
例子:嵌套函数访问外部函数的this(来自《javascript权威指南》P171)
var o={ //对象o
m:function(){ //对象中的方法m()
var self=this; //将this的值保存至一个变量中
console.log(this===o); //输出true,this就是这个对象
f(); //调用辅助函数f()(此时调用外部函数的m()时此处的f()调用嵌套函数就属于函数调用了) function f(){ //定义一个嵌套函数
console.log(this===o); //"false":this的值是全局对象或者undefined;
console.log(self===o); //"true":self指外部函数的this值
} }
5. 构造函数的原型模式中的this
如果要在基本包装类型String添加了一个名为startsWith()的方法。
String.prototype.startsWith=function(text){
return this.indexOf(text)==0;
} var msg="hello world";
alert(msg.startsWith("Hello")); //true
这里的原型函数中的this也是指向调用者的,要知道prototype中的这些方法和属性是所有实例对象所共享的,也就是说当新创建的对象msg以方法调用模式调用startsWith()方法,虽然在实例中没有找到这个方法,但在原型对象中找到了这个方法,故返回的就是这个方法的值,注意,在原型中查找值的过程是一次过程。
6. 匿名函数中的this
匿名函数属于函数表达式,不能变量提升,函数表达式必须等到js引擎执行到它所在行时,才会从上而下一行一行地解析,匿名函数的执行环境具有全局性,因此其this对象通常指向window,来看( function(){…} )()和( function (){…} () )这两种立即执行函数的写法,要知道在函数体后面加括号就能立即调用,则这个函数必须是函数表达式,不能是函数声明。
这样的写法有什么用呢?
javascript中没用私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉,根据javascript函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。
例子:
- 箭头函数中的this
let name='windows';
let obj={
name:'windows',
stack: () => {
console.log(this.name); //undefine
}
}
console.log(obj.stack()); //undefine
说明:箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或者new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。箭头函数不会创建自己的this,它只会从作用链的上一层继承this。
function Stack() {
this.age = 0;
setInterval(() => {
this.age++; // this正确地指向Stack对象
}, 1000);
}
var p = new Stack();
console.log(p.age);
箭头函数不能用作构造器,和new一起会抛出错误
let Foo = () => {};
let foo = new Foo(); // TypeError: Foo is not a constructor let Stack=()=> {
let name='outside';
class Stack{
constructor(){
this.name=name;
}
}
return Stack;
};
let b=new Stack();
console.log(b.name);//Stack is not a constructor let Stack = () => {
let name = 'outside';
console.log(this);
class Stack {
constructor() {
this.name = name;
}
}
return Stack;
};
console.log(new Stack().name); //Stack is not a constructor
箭头函数没有prototype属性
let Foo = () => {};
console.log(Foo.prototype); // undefined
- 箭头函数用于闭包
let Stack = () => {
let name = 'outside';
console.log(this);//Window
class Stack {
constructor() {
//this.name = 'inside';
this.name = name;
}
}
return new Stack();
};
console.log(Stack().name);//outside
let Stack = () => {
let name = 'outside';
console.log(this);//Window
class Stack {
constructor() {
this.name = 'inside';
}
}
return Stack;
};
console.log(Stack().name);//Stack
- 匿名函数用于闭包
let Stack = function() {
let name = 'outside';
console.log(this);//Window
class Stack {
constructor() {
this.name = name;
}
}
return Stack;
}();
let b = new Stack();
console.log(b.name);//outside let Stack = function() {
let name = 'outside';
console.log(this);//Window
class Stack {
constructor() {
this.name = name;
}
}
return Stack;
};
//let b = new Stack();
let b = Stack();
let a=new b();
console.log(a.name);//outside
最新文章
- 16-static和extern关键字2-对变量的作用
- 手机端页面rem自适应脚本
- jquery.validate使用 - 常用验证脚本
- Web API的Log问题
- openfire+asmack搭建的安卓即时通讯(六) 15.4.16
- POJ 2992 Divisors (求因子个数)
- 如何为Myeclipse手工添加dtd支持
- poj 3233 Matrix Power Series
- 智能的API、云服务和SOA测试解决方案——Parasoft SOAtest
- js精要之模块模式
- asp.net core新特性(1):TagHelper
- H5页面中尝试调起APP
- Spring Boot 整合 Mybatis Annotation 注解的完整 Web 案例
- 【数据结构】 字符串&;KMP子串匹配算法
- RocketMQ,JStorm与Tair使用笔记
- 【HDFS API编程】删除文件
- from String value ('{}'); no single-String constructor/factory
- 第二个spring冲刺第9天
- js加入购物车抛物线动画
- python Selenium+phantomjs 小技巧