这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript this 详细介绍的相关资料, 需要的朋友可以参考下
this 的值是在运行时确定的
JS 中的 this 究竟代表什么,这是在程序运行时根据上下文环境确定,可以分为以下几种情况。
1. 全局作用域中的 this
在全局作用域中,this 指向 window 对象。
- console.log(this); //指向window对象
- this.x = 5 //在全局作用域内创建一个x
- //与this.x = 5的等价情况:
- //var x = 5;
- //x = 5;
在全局作用域中执行 var x=5,其实是为 window 对象创建一个属性 x,并令其等于 5。
若定义变量时不加 var,JS 会认为该变量为全局变量,会将其当作 window 对象的属性。
2. 函数中的 this
JS 中函数有两种,直接调用的函数称为普通函数,通过 new 创建对象的函数称为构造函数。
2.1 构造函数中的 this
构造函数的 this 指向它所创建的对象,如:
- function Person(name) {
- this.name = name; //this指向该函数创建的对象person
- }
- var person = new Person("chaimm");
2.2 普通函数中的 this
普通函数的 this 指向 window 对象。 若上述例子,直接执行 Perosn 函数,则其中 this 代表 window 对象,因此该函数执行后会创建一个全局的 name。
- function Person(name) {
- this.name = name; //this指向window
- }
- Person("chai"); //当作普通函数执行,this指向window对象
3. 对象中的 this
对象中的 this 指向当前对象,如:
- var person = {
- name: "chaimm",
- getName: function() {
- return this.name;
- }
- }
上述代码中 this 指向函数 getName 所属的对象。
但是,如果一个对象的函数中又嵌套了一个函数,这个函数的 this 指向的却是 window,而并不是其外层的对象。
- var person = {
- name: "chaimm",
- setName: function(name) { (function(name) {
- this.name = name; //此时this并不代表person对象,而是代表window对象
- })(name);
- }
- }
上述示例中,person 对象中有一个 getName 函数,而 getName 函数内部又有一个函数,这个函数内部的 this 指向 window 对象,而非 person 对象,这是 JS 的一个 bug!一般作如下处理,规避这个 bug:
- var person = {
- name: "chaimm",
- setName: function(name) {
- var thar = this; //将this赋给that
- (function(name) {
- that.name = name; //此时that指向person对象
- })(name);
- }
- }
我们在 person 对象的第一层函数中,将 this 赋给局部变量 that,然后在第二层函数中使用 that,此时 that 指向 person 对象,可对 person 的属性进行操作。
注意:若将一个对象中的函数赋给一个变量后,再通过该变量调用这个函数,此时该函数中的 this 指向 window,而非该对象,如下所示:
- var person = {
- name: "chaimm",
- getName: function() {
- return this.name;
- }
- }
- //将getName函数赋给一个新的变量
- var newGetName = person.getName;
- //通过新的变量调用这个函数,这个函数中的this将指向window
- newGetName(); //若全局作用域中没有name,则将返回undefined
4. 用 call 和 apply 函数给 this 开挂
这两个函数都能手动指定被调用函数内部的 this 指向哪个对象。
- //定义一个构造函数
- var Person = function(name) {
- this.name = "";
- this.setName = function(name) {
- this.name = name;
- }
- }
- //创建两个对象
- var personA = new Person("A");
- var personB = new Person("B");
- //使用personA的setName函数去修改personB的name属性
- personA.setName.apply(personB, ["C"]);
apply 用法
对象 A. 函数名. apply(对象 B, 参数列表); 当对象 B 作为 apply 的第一个参数传给 apply 时,对象 A 的函数中 this 就指向了对象 B,此时对象 A 的该函数对 this 的操作将会作用在对象 B 上,由此实现了用对象 A 去调用对象 B 的函数。
来源: http://www.phperz.com/article/17/0518/331753.html