JavaScript面向对象编程之this关键字

2019-11-08 01:08:28

字体：大中小

来源：转载

供稿：网友

this总是返回一个对象，简单说，就是返回属性或方法“当前”所在的对象。

1.在全局环境使用this，它指的就是顶层对象window。

console.log(this);//windowvar a=2;this.a;//2function f(){console.log(this);}f();//window

2.构造函数中的this，指的是实例对象。

function F(){this.PRice=2;}var f=new F();f.price;//2

3.对象通过点运算符调用方法，方法中的this指的是该对象。

var obj={ a:1, f:function(){console.log(this);this.a=2;}}obj.f();obj.a;

4.函数赋值给另一个变量，函数内的this代表调用函数运行时所在的对象。

var obj={ f:function(){console.log(this);}}var foo=obj.f;foo();//window

5.先运算，后执行，在全局环境执行运算结果，this指向全局环境

var obj={ f:function(){console.log(this);}}(1,obj.f)()//window

6.避免多层this

var o = { f1: function () { console.log(this); var f2 = function () { console.log(this); }();//先执行，后赋值，没有被o对象调用 }}o.f1()// Object// Window

7.foreach方法的回调函数中的this，指向window对象

var arr=[1,2,3];arr.foreach(function(item){console.log(this);})

8.避免回调函数中的this

var o = new Object();o.f = function () { console.log(this === o);}o.f()//true$('#button').on('click', o.f);//false

javaScript提供了call、apply、bind这三个方法，来切换/固定this的指向。

function.prototype.call()

1.参数应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。 2.如果call方法的参数是一个原始值，那么这个原始值会自动转成对应的包装对象，然后传入call方法。 3.call方法还可以接受多个参数。第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。

var n=1;var obj={n:2};function f(){console.log(this.n);}f.call(obj);//2f.call(window);//1f.call(null);//1f.call();//1function add(a,b){console.log(a+b);}add.call(this,1,2);//3

call方法的一个应用是调用对象的原生方法。

var obj={};obj.hasOwnProperty('toString');//falseobj.hasOwnProperty=function(){return true;}obj.hasOwnProperty('toString);//true//hasOwnProperty方法被覆盖，如何才能使用原来的方法呢？Object.prototype.hasOwnProperty.call(obj,'toString');//false

function.prototype.apply()

接收一个数组作为函数执行时的参数，使用格式: function.apply(thisValue, [arg1, arg2, …])

一些有趣的应用 1.Math.max()和apply结合—求数组的最大元素

Math.max(1,2,3)//3Math.max.apply(null,[1,2,3])//3

2.Array构造函数和apply结合—将数组的空元素变为undefined

Array.apply(null,[1,,2])//[1, undefined, 2]

数组的forEach方法会跳过空元素，但是不会跳过undefined。

Array.apply(null,[1,,3]).forEach(function(item){console.log(item);})//1//undefined//3[1,,3].forEach(function(item){console.log(item);})//1//3

3.slice和apply结合–将类似数组的对象转换为数组

var a={0:'a',1:'b',length:3};Array.prototype.slice.apply(a);//["a", "b", undefined]Array.prototype.slice.apply(arguments);Array.prototype.slice.call(arguments);[].slice.apply(arguments);

对象必须有length属性

apply方法（或者call方法）不仅绑定函数执行时所在的对象，还会立即执行函数。

function.prototype.bind()

1.用于将函数体内的this绑定到某个对象，然后返回一个新函数，没有立即执行

var obj={ count:0, inc:function(){this.count++;}}obj.count;//0obj.inc();obj.count;//1var f=obj.inc;f();obj.count;//1count;//NaN

改成：

var f=obj.inc.bind(obj);//产生一个新函数，函数中的this固定指向objf();obj.count;//2

2.绑定this以外，还可以绑定原函数的参数

function add(x,y){return this.m+x+y;}var obj={m:1}var f=add.bind(obj,3);//传入x为3f(2);

3.对于那些不支持bind方法的老式浏览器，可以自行定义bind方法。

if(!('bind' in Function.prototype)){ Function.prototype.bind=function(){ var fn=this; var context=arguments[0]; var args=[].slice.call(arguments,1); return function{ return fn.apply(context,args); } }}

4.利用bind方法，可以改写一些Javascript原生方法的使用形式，以数组的slice方法为例。

[1, 2, 3].slice(0, 1)// [1]// 等同于Array.prototype.slice.call([1, 2, 3], 0, 1)// [1]//等同于var slice = Function.prototype.call.bind(Array.prototype.slice);slice([1, 2, 3], 0, 1) // [1]//o.slice(args)->slice(o,args)

上一篇：JavaScript函数的一些注意点(2)

下一篇：javascript预解析详解