探究JavaScript中的this关键字
来源:互联网 发布:手机上怎么看淘宝直播 编辑:程序博客网 时间:2024/06/10 16:35
this
当函数创建后,this也被创建,它指向该函数所操作的对象。
我们先来创建一个对象:
var zhangsan = { living:true, age:23, gender:'male', getGender:function(){return zhangsan.gender;}};console.log(zhangsan.getGender()); //'male'
注意在getGender方法中我们使用了zhangsan对象本身。它可以使用this来代替,因为this指向该函数所操作的对象,即zhangsan。
this由上下文决定
传递给函数的this的值是由函数被调用时的上下文决定的。
下面例子中myObject的属性sayFoo指向了sayFoo函数。当在全局的作用域下调用sayFoo函数,this就为window对象。当它被myObject的方法调用时,this就为myObject。
var foo = 'foo';var myObject = {foo: 'I am myObject.foo'};var sayFoo = function() { console.log(this['foo']);};myObject.sayFoo = sayFoo;myObject.sayFoo(); // 'I am myObject.foo' sayFoo(); // 'foo'
很显然this的值是基于函数调用时的上下文。
嵌套函数中的this
当this出现在嵌套函数中,它就会指向window对象,而不是该函数中的对象。
var myObject = { func1:function() { console.log(this); //myObject var func2=function() { console.log(this); //window var func3=function() { console.log(this); //window }(); }(); }};myObject.func1();
该例中的func2和func3都是嵌套函数,所以this为window。
下面的例子就很容易得出答案了~
var foo = { func1:function(bar){ bar(); //window console.log(this);//foo object }};foo.func1(function(){console.log(this)});
如果我们不想this的值丢失,仍然指向该对象,一般我们会使用变量_this或that来存储this的值。如:
var myObject = { myProperty:'some', myMethod:function() { var that=this; var helperFunction = function() { console.log(that.myProperty); //'some' console.log(this); //window }(); }}myObject.myMethod();
修改this的值
this的值通常是由调用函数的上下文决定的,但是你可以通过apply()或者call()方法来重写它的值。即可以使用其它任意对象来调用一个函数。而这两个方法唯一不同之处就是参数传递方式不同,apply()方法传递参数数组,call()方法可以传递任意多个参数,下面举例说明:
var myObject = {};var myFunction = function(param1, param2) { this.foo = param1; this.bar = param2; console.log(this); //{foo = 'foo', bar = 'bar'}};myFunction.call(myObject, 'foo', 'bar'); // 将this设为myObject//myFunction.apply(myObject, ['foo', 'bar']);console.log(myObject);//foo = 'foo', bar = 'bar'}
构造函数中的this
当一个函数(构造函数)通过new关键字来调用,该函数中的this指向它的实例。
var Person = function(name) { this.name = name || 'zhangsan'; // this将指向具体的实例对象}var zhangsan = new Person('lisi'); //创建一个Person实例console.log(zhangsan.name);//'lisi'
下面将调用方式改变下,不使用new:
var Person = function(name) { this.name=name||'zhangsan';}var lisi = Person('lisi'); //注意没有使用newconsole.log(lisi.name); //报错,因为zhangsan为undefinedconsole.log(window.name);//'lisi'
构造函数的原型方法中的this
构造函数的原型方法中的this会指向调用该方法的实例对象:
var Person = function(x){ if(x){this.fullName = x};};Person.prototype.getName = function() { return this.fullName; //this为实例对象}var zhangsan = new Person('zhangsan');var lisi = new Person('lisi');console.log(zhangsan.getName(), lisi.getName());//zhangsan , lisi//如果该实例没有fullName属性,就会从原型链中查找Object.prototype.fullName = 'John';var john = new Person(); console.log(john.getName());//John
0 0
- 探究JavaScript中的this关键字
- Javascript中的this关键字
- JavaScript中的this关键字
- JavaScript 中的this 关键字
- Javascript中的关键字this
- JavaScript中的this关键字
- Javascript中的this关键字
- JavaScript中的this关键字
- JavaScript中的this关键字
- JavaScript中的this关键字
- Javascript中的this关键字
- JavaScript中的this关键字
- javaScript中的this关键字
- JavaScript中的this关键字
- JavaScript 中的 this 关键字
- javaScript中的this关键字
- JavaScript中的this关键字
- JavaScript 中的 this 关键字
- TS各个表 与 SECTION 的解析 CAS原理
- 链接字符串String.prototype.format
- 微信朋友圈短视频控件的实现, TextureView的基本使用。
- 两个字符串的编辑距离-动态规划方法
- java编程思想(十一)总结
- 探究JavaScript中的this关键字
- DecimalFormat用法
- Android Studio修改全部包名
- datagrid 字段添加超链接
- Log4j日志文件存放到项目目录下(Spring集成)
- 关于信息头Cache-Control的那些事儿
- jquery判断标签是否拥有某个class
- C++ char数组和string类简单使用总结
- JAVA从菜鸟【入门】到新手【实习】一一Linux操作系统学习