资讯专栏INFORMATION COLUMN

this指向性的问题汇总

baukh789 / 1956人阅读

摘要:一因为中的是在运行期绑定的,因此中的关键字具备多重含义。二具体在应用中,的指向大概可以分为以下四种。例如,或者都是为了改变函数内部的指向。

一、因为JavaScript中的this是在运行期绑定的,因此JavaScript中的this关键字具备多重含义。

二、具体在应用中,this的指向大概可以分为以下四种。

1.作为对象的方法调用 obj.run()

2.作为普通函数调用 function()

3.作为构造函数调用 var b =new a();

4.function.prototype.call或者function.prototype.apply调用

三、作为对象的方法调用和作为普通函数调用

window.name=bj;

var obj={

name:zzy,

getName(){

    console.log(this.name) 

    }

}

obj.getNAme();//输出的zzy

var getA=obj.getName;

getA(); //输出的为bj

不管getA之前是getNAme(),还是其他某个对象的属性,只要最后是以getA(),这种方式调用的,均视为普通函数调用,此时this指向window对象

但是,在ES5的strict模式下,作为函数调用的 this被规定不会指向全局对象

getA(); //输出的为underfined

四.构造函数的调用

通常情况下,构造函数里的this指向那个返回的这个对象,但是如果构造器显示的返回了一个object类型的对象,则this指向返回的object对象

var Myclass = function(){

this.name = "beidan";

}

var obj = new Myclass();

console.log(obj.name);//beidan

var Myclass = function(){

this.name = "beidan";

return{        //显示的返回一个对象,注意!既要是显示,即有return,也要是对象{}

    name:"test"

}

}

var obj = new Myclass();

console.log(obj.name);//test

五.function.prototype.call或function.prototype.apply调用

call,apply都是为了改变函数内部this的指向。例如,function.apply()或者

function.apply()都是为了改变函数内部的this指向。

二者的作用完全一样,只是接受参数的方式不太一样。

function.call(this, arg1, arg2);        //参数列表arg1,arg2

function.apply(this, [arg1, arg2]);    //参数数组 [arg1,arg2]

第一个参数,指定了那个函数体内this对象的指向,它可以是javascript对象,如果为null,则函数体内的this会指向默认的window

第二个参数,call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。当参数不确定数量时用 apply ,然后把参数 push 进数组传递进去。或者也可以通过 arguments来获取所有的参数。这样看来,apply的使用率更高。

1.修正this指向

在实际开发过程中,会出现一下的情况

document.getElementById("div1").onclick = function(){

console.log(this.id);  //div1

var func = function(){

    console.log(this.id);   

}

func();  //通过普通函数调用,this指向window,输出undefined

}

使用call来改变this的指向

document.getElementById("div1").onclick = function(){

console.log(this.id);  //div1

var func = function(){

    console.log(this.id);

}

func.call(this); //使func函数内部的this指向当前的函数对象,输出div1

}

2.模拟继承

function fruits() {}

fruits.prototype = {

color: "red",

say: function() {

    console.log("My color is "+ this.color);

}

}

var apple = new fruits;

apple.say(); //My color is red

但是,如果我们还有其它 2个对象 banana= {color : "yellow"} ,orange = {color:‘orange’},想使用say方法,但是又不想对它们重新定义say方法。

那么,我们可以用apply或者call 借用 fruit里面的say方法

banana = {color: "yellow"};

orange = {color:‘orange’};

apple.say.call(banana); //My color is yellow

apple.say.apply(orange ); //My color is orange

这里需要注意的是banana继承apple.say的方法;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109430.html

相关文章

  • js对象创建方法汇总及对比

    摘要:中创建对象的方式有很多,尤其是基于原型的方式创建对象,是理解基于原型继承的基础。该函数中的属性指向该源性对象当通过该函数的构造函数创建一个具体对象时,在这个对象中,就会有一个属性指向原型。 js中创建对象的方式有很多,尤其是基于原型的方式创建对象,是理解基于原型继承的基础。因此在这里汇总一下,并对各种方法的利弊进行总结和对比,不至于以后对这些概念有模糊。 简单方式创建 var o = ...

    piapia 评论0 收藏0
  • 【Step-By-Step】一周面试题 && 答案汇总 / 01

    摘要:构造函数返回值是或,这种情况下指向的是返回的对象。并执行了构造函数中的方法如果函数没有返回其他对象,那么指向这个新对象,否则指向构造函数中返回的对象。对于文档来说应当是唯一的。的值意味着其不可能是基本数据类型。 关于【Step-By-Step】 不积跬步无以至千里。 Step-By-Step (点击进入项目) 是我于 2019-05-20 开始的一个项目,项目愿景:一步一个脚印,量变引...

    xiaolinbang 评论0 收藏0
  • 一些前端面试题汇总

    摘要:类型请求成功后的回调函数。参数由服务器返回,并根据参数进行处理后的数据描述状态的字符串。默认设置下,所有请求均为异步请求。类型发送请求前可修改对象的函数,如添加自定义头。对象是唯一的参数。如果返回可以取消本次请求。设置为将不缓存此页面。 题目一 : 统计字符串中出现次数最多的字符 eg : var s = abcdefghijklabcdaaaefadca ; // 其中a出现次数最多...

    mtunique 评论0 收藏0
  • JavaScript汇总

    摘要:前端笔记基本数据类型种数据类型基本类型复杂类型基本类型与引用类型的区别基本类型基本类型,是按值访问,可以操作保存在变量中的实际值基本类型的值不可变输出输出其中的实际值并未变化,方法是返回了一个新的字符串也不能对基本类型添加属性和方法表明了基 前端笔记/JavaScript 基本 数据类型 6种数据类型 基本类型: Undefined、Null、Boolean、String、Numbe...

    用户83 评论0 收藏0
  • 前端面试题目汇总

    摘要:线程在执行过程中与进程还是有区别的。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。 关于js 1.原型链 2.AJAX请求数据时解决缓存的办法3.js的继承 ...

    lastSeries 评论0 收藏0

发表评论

0条评论

baukh789

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<