快捷搜索:  汽车  科技

前端开发必须掌握的技术(前端工程师必学this关键字)

前端开发必须掌握的技术(前端工程师必学this关键字)1. 4 原型链上的this对象方法的this ,由obj调用,this就指向obj对象。1.2. 函数this一般函数的this ,由window调用,this就指向window对象。1.3 对象方法的this

今天我们来认识一下this的个关键字,我们在JS编程中是不是使用的很多,比如我们在用构造函数创建全局对象的时候,是不是用过,我们称为什么“代表当前对象”其实这种说话是过于牵强,严格说是错误的,这里大家一定要明白这点,面试的时候不要说代表的当前对象,那样一下就暴露了你不到位,如果对this的理解都是错的,那么如何相信你能写出多么健壮的js。

this关键字

1.1. 全局this

全局this一般指向全局对象,浏览器中的全局对象就是 window。例如:

前端开发必须掌握的技术(前端工程师必学this关键字)(1)

1.2. 函数this

一般函数的this ,由window调用,this就指向window对象。

前端开发必须掌握的技术(前端工程师必学this关键字)(2)

1.3 对象方法的this

对象方法的this ,由obj调用,this就指向obj对象。

前端开发必须掌握的技术(前端工程师必学this关键字)(3)

1. 4 原型链上的this

在原型模式中,this常用的有两种情况:

在类中this.xxx=xxx;this->当前类的实例

某一个方法中的this->看执行的时候"."前面是谁this就是谁

1)需要先确定this的指向(this是谁)

2)把this替换成对应的代码

3)按照原型链查找的机制,一步步的查找结果

function Fn(){

this.x =100;

this.y =200;

this.getY =function(){

console.log(this.y);

};

}

Fn.prototype = {

constructor:Fn

y:300

getX:function(){

console.log(this.x);

}

getY:function(){

console.log(this.y);

}

};

var f = new Fn;

f.getX(); // 100 -> this.x 替换成f.x

f.__proto__.getX();//-> this是f._proto_ -> f _proto_.x->undefined

Fn.prototype.getX();//->undefined

f.getY();// 200;

f.__proto__.getY();//300

1.5 构造器上的this

使用new关键字构造时,默认都指向当前新创建的对象。

前端开发必须掌握的技术(前端工程师必学this关键字)(4)

总结:

  1. this指向的永远只可能是对象.
  2. this指向谁永远不取决于this写在哪,而是取决于函数在哪调用.
  3. this指向的对象,称之为函数的上下文context,也叫函数的调用者.

前端大神如有个人见解欢迎补充 谢谢

猜您喜欢: