新浦京81707con > 首页 > javascript中的this

原标题:javascript中的this

浏览次数:65 时间:2019-05-07

s中的this总是令人,是js名闻遐迩的坑之1。
小结一下,this的坑分为两种。
一.全局代码中的this。
alert(this);//window
全局范围内this将会全局,在浏览器window

JavaScript中的this总是令人吸引,应该是js妇孺皆知的坑之一。 个人也以为js中的this不是1个好的宏图,由于this晚绑定的表征,它能够是全局对象,当前目的,大概…有人乃至因为坑大而不用this。

贰.看作单纯函数调用

实际只要完全调节了this的行事规律,自然就不会走进那一个坑。来看下以下这几个境况中的this分别会指向哪些:

function foo(x){
    this.x = x;
}
foo(99);
alert(x);//全局变量x值为99

壹.全局代码中的this
1 alert(x);
// 全局变量x值为二

 

 

 

大局范围内的this将会针对全局对象,在浏览器中正是window。

此处this指向全局对象,正是window。在严刻形式中,则undefiend。

二.看作单纯的函数调用
  function fooCoder(x) {
this.x = x;
}
fooCoder(2);
alert(x);
// 全局变量x值为二

叁.作为靶子的措施调用

 

var name = "xiaoming";
var person = {
    name:"xiaohong",
    hello:function(sth){
        console.log(this.name   "says"   sth);
    }
}
person.hello("hello world");

此处this指向了大局对象,即window。在严刻形式中,则是undefined。

 

三.作为靶子的办法调用
 var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
console.log(this.name " says " sth);
}
}
person.hello("hello world");

输出 xiaohong says hello world。this指向person对象,即当前目的。

 

4.当作构造函数
new Foo();
function Foo(){
this.name = “fooname”;
}
构造函数内部的this指向新成立的对象

出口 foocoder says hello world。this指向person对象,即眼下指标。

5.里边函数

四.看作构造函数

var name = "xiaoming";
var person = {
    name:"xiaohong",
    hello:function(sth){
        var sayhello = function(sth){
            console.log(this.name   "says"   sth);
        }
        sayhello(sth);
    }
}
person.hello("hello world");

1 new FooCoder();

 

函数内部的this指向新成立的对象。

 

伍.里边函数
  var name = "clever coder";

在里边函数中,this未有按预期的绑定到外围函数对象上,而是绑定到了全局对象。这里普遍被认为是 JavaScript语言的安插不当,因为未有人想让里面函数中的 this指向全局对象。 一般的管理格局是将 this作为变量保存下来,一般约定为 that恐怕 self

var person = {
name : "foocoder",
hello : function(sth){
var sayhello = function(sth) {
console.log(this.name " says " sth);
};
sayhello(
}

var name = "xiaoming";
var person = {
    name:"xiaohong",
    hello:function(sth){
        var that = this;
        var sayhello = function(sth){
            console.log(that.name   "says"   sth);
        }
        sayhello(sth);
    }
}
person.hello("hello world");

person.hello("hello world");
//clever coder says hello world

 

 

6.使用call和apply设置this 

在中间函数中,this未有按预想的绑定到外围函数对象上,而是绑定到了大局对象。这里普遍被以为是JavaScript语言的设计不当,因为从没人想让个中等高校函授数中的this指向全局对象。一般的管理格局是将this作为变量保存下去,一般约定为that只怕self:
 var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
var that = this;
var sayhello = function(sth) {
console.log(that.name " says " sth);
};
sayhello(sth);
}
}
person.hello("hello world");
//foocoder says hello world

person.hello.call(person, “world”);
apply和 call类似,只是后边的参数是通过3个数组传入,而不是分离传入。两者的点子定义:
call(thisArg[,arg1,arg2,…]); // 参数列表,arg一,arg2,…
apply(thisArg [,argArray] ); // 参数数组,argArray
两方都以将某些函数绑定到有个别具体对象上应用,自然此时的 this会被显式的安装为第2 个参数。

 

我们兴许时时会写那样的代码:
$(“#ele”).click=obj.handler;

6.使用call和apply设置this

万壹在 handler中用了 this,this会绑定在 obj上么?明显不是,赋值今后,函数是在回调中实践的,this会绑定到$(“#ele”)元素上。
那边介绍1个bind方法

1 person.hello.call(person, "world");

var name = "xiaoming";
        var person = {
            name:"xiaohong",
            hello:function(sth){
                var that = this;
                var sayhello = function(sth){
                    console.log(that.name   "says"   sth);
                }
                sayhello(sth);
            }
        }

var odiv = document.getElementById("odiv");
odiv.onclick=person.hello.bind(person,"hello world");//xiaohong says hello world

apply和call类似,只是后边的参数是经过三个数组传入,而不是分离传入。两者的章程定义:

 

  call( thisArg [,arg1,arg2,… ] );
// 参数列表,arg一,arg贰,...

bind方法和call/apply方法同样,不一致的就是bind方法不举办,只是拷贝代码。用这么些法子能够改造this指向,this指向的不再是odiv而是person。

apply(thisArg [,argArray] );
// 参数数组,argArray

本文由新浦京81707con发布于首页,转载请注明出处:javascript中的this

关键词: 新浦京81707con

上一篇:澳门葡京赌场官网改变另一个标签的属性

下一篇:没有了