0


JS高级程序语言设计-第五天打卡-实战上彻底搞懂JS面对对象上篇-龙哥手记

📜个人简介

⭐个人主页:龙哥手记 🙋
🍑博客领域:编程基础,Java
🍎写作风格:干货,干货,还是tmd的干货
🌸精选专栏:【图解JavaScript】
🧧同名工粽号:回复见面礼
🚀支持龙哥:点赞 👍,收藏 ⭐,留言 📪

还是我霉来镇楼吧 🤟
在这里插入图片描述

文章目录

1、对象搞懂

面向对象编程(OOP)再熟悉不过了哈,Java,Python这些主流语言都是。不是下面这样,别歪喽,它的本质是把真实世界各种复杂的关系,抽象成一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。
在这里插入图片描述

那么,“对象”(object)到底是什么?我们从两个层面来理解。

(1)对象是单个实物的抽象。
在这里插入图片描述一本书、一辆车、一个人都可以是对象,一个数据库、一张网页、一个与远程服务器的连接也可以是对象。把实物被抽象成对象,实物之间的关系就变成了对象之间的关系,从而就可以模拟现实情况,针对对象进行编程。

(2)更进一步对象是一个容器,它封装了属性(property)和方法(method)。

属性是对象的状态,方法是对象的行为(完成某种任务)。比如,我们可以把动物抽象为

animal

对象,使用“属性”记录具体是那一种动物,使用“方法”表示动物的某种行为(奔跑、捕猎、休息等等)。

还有对象都是功能中心,具有明确分工,可以完成接受信息、处理数据、发出信息等任务。对象可以复用,也就是通过继承机制还可以定制,继承的详细内容下篇来讲。因此,面向对象编程具有灵活、代码可复用、高度模块化等特点,容易维护和开发,比起由一系列函数或指令组成的传统的过程式编程(procedural programming),更加适合多人合作的大型软件项目

说了带来的便利之外,咱们主要

在这里插入图片描述

var person ={// 对象
                name:'张三',// 属性
                interest:function(){// 方法(行为)returnthis.name +'正在喝酒'}}

    person.interest()// 张三正在喝酒// 真实世界: 有一个人,名字叫张三,他正在喝酒。// 对象模拟: 一个人抽象为一个对象person,对象是一个容器,内部封装了属性name叫张三,他正在喝酒封装成方法interest

上面创建了一个person对象,并且创建“张三”属性和方法,在 function方法 里的this,就是代表 person 对象本身。这种是JavaScript 创建对象最基本的方法,但也是有缺点,想创建多个类似的对象,就会产生大量的代码。

工厂模式来帮忙

为了解决多个类似对象声明,它解决了实例化对象产生大量重复的问题,是不是很棒?

写了代码你才能理解

functioncreateObject(name, age){//集中实例化的函数var obj =newObject();
             obj.name = name;
             obj.age = age;

             obj.run=function(){returnthis.name +this.age +'运行中...';};return obj;}var box1 =createObject('Lee',100);//第一个实例var box2 =createObject('Jack',200);//第二个实例alert(box1.run());alert(box2.run());//保持独立

咱们上面确实通过类似工厂的方法创建了两个实例,但是它还是有许多问题,创建不同对象其中属性和方法都会重复去创建,这不但消耗内存;还有函数识别问题等等,下面我介绍的这个构造函数能够解决它。

2、再看构造函数

面向对象编程的第一步,就是要生成对象。前面说过,对象是单个实物的抽象。通常需要一个模板,表示某一类实物的共同特征,然后对象根据这个模板生成。
在这里插入图片描述

典型的面向对象编程语言(比如 C++ 和 Java),都有“类”(class)这个概念。所谓“类”就是对象的模板,对象就是“类”的实例。但是,JavaScript 语言的对象体系,不是基于“类”的,而是基于构造函数(constructor)和原型链(prototype)

关于原型链详细请点JS你必须拿捏的名词(很长哦)

JavaScript 语言使用构造函数(constructor)作为对象的模板

所谓”构造函数”,就是专门用来生成实例对象的函数

它就是对象的模板,能描述实例对象的基本结构

一个构造函数,它可以生成多个实例对象,这些实例对象都有相同的结构,都是一个模子刻出来的啊

构造函数就是一个普通的函数,有它自己的特征和用法。

varVehicle=function(){this.price =1000;};

上面代码中,

Vehicle

就是构造函数。为了与普通函数区别,构造函数名字的第一个字母通常大写。

另外构造函数的特点还有两个

  • 函数体内部使用了this关键字,代表了要生成的对象实例。
  • 生成对象的时候,必须使用new命令。

下面先介绍

new

命令。

3、new命令

基本用法

new

命令的作用:执行构造函数,返回一个实例对象

varVehicle=function(){this.price =1000;// this指向实例对象v};var v =newVehicle();// new 执行一个构造函数,返回一个实例对象给v
                v.price // 1000

上面代码通过

new

命令,让构造函数

Vehicle

生成一个实例对象,保存在变量

v

中。这个新生成的实例对象,从构造函数

Vehicle

得到了

price

属性。

new

命令执行时,构造函数内部的

this

,就代表了新生成的实例对象,

this.price

表示实例对象有一个

price

属性,值是1000。

注意的是使用

new

命令时,根据需要,构造函数也可以接受参数

varVehicle=function(p){this.price = p;};var v =newVehicle(500);// new 命令时,构造函数可以接受参数
new

命令本身就可以执行构造函数,所以后面的构造函数可以带括号,也可以不带括号。下面两行代码是等价的,但是为了表示这里是函数调用,推荐使用括号

// 推荐的写法var v =newVehicle();// 不推荐的写法var v =newVehicle;

一个很自然的问题是,如果忘了使用

new

命令,直接调用构造函数会发生
在这里插入图片描述
这种情况下,构造函数就变成了普通函数,并不会生成实例对象。而且由于前面说到的原因,

this

这时代表全局对象,将造成一些意想不到的结果,咱们还是看代码。

varVehicle=function(){this.price =1000;};var v =Vehicle();// 忘记使用new命令,构造函数变成普通函数,不会生成实例,函数内部this指向window
             v // undefined   函数为普通函数且没有返回值,所有v为undefined
             price // 1000  函数内部this指向window, price变成全局属性,等价于window.price

上面代码中,调用

Vehicle

构造函数时,忘了加

new

命令。结果,变量

v

变成了

undefined

,而

price

属性变成了全局变量。因此,应该非常小心,一定要避免不使用

new

命令、直接调用构造函数,不然gg。

为了保证构造函数必须与

new

命令一起使用,有一个办法解决,构造函数内部去使用严格模式,即第一行加上

use strict

。这样的话,不管你忘了还是没忘使用

new

命令,直接调用构造函数就会报错,这样我一眼就能看出来了。

functionFubar(foo, bar){'use strict';this._foo = foo;// 严格模式中this不能指向window对象,不加new调用this等于undefined,给undefined添加属性会报错this._bar = bar;}Fubar()// TypeError: Cannot set property '_foo' of undefined

上面代码的

Fubar

它是构造函数,

use strict

命令保证了该函数在严格模式下运行。因为**严格模式中,函数内部的

this

不能指向全局对象**,默认等于

undefined

,导致不加

new

调用会报错(为啥报错嘛,JavaScript 它不允许对

undefined

添加属性)。

难道报错就办法了吗?另一个解决办法,构造函数内部判断是否使用

new

命令,如果发现没有使用,则直接返回一个实例对象。

functionFubar(foo, bar){// instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链(),返回布尔值。// 语法: <实例对象> instanceof <构造函数>if(!(thisinstanceofFubar)){// 或 使用 (!new.target) 判断是否使用new命令returnnewFubar(foo, bar);}this._foo = foo;this._bar = bar;}Fubar(1,2)._foo // 1(newFubar(1,2))._foo // 1

在这里插入图片描述
欧耶,上面代码中的构造函数,不管加不加

new

命令,都会得到同样的结果。

new 命令的原理

若用

new

命令时,它后面的函数依次执行下面的步骤。

  1. 创建一个空对象,作为将要返回的实例对象。
  2. 将这个空对象的原型,指向构造函数的prototype属性。
  3. 将这个空对象赋值给函数内部的this关键字。
  4. 开始执行构造函数内部的代码。(代码中this指向空对象(实例对象))
  5. 返回实例对象(或自定义对象)

也就是说,构造函数内部,

this

指的是一个新生成的空对象,**所有针对

this

的操作,都会发生在这个空对象上**。构造函数之所以叫“构造函数”,意思就是说这个函数的目的,就是操作一个空对象(即

this

对象),将其“构造”为需要的样子。

如果构造函数内部有

return

语句,而且

return

后面跟着一个对象,

new

命令会返回

return

语句指定的对象;否则,就会不管

return

语句,返回

this

对象,好吧我估计你有点迷,还是看代码

varVehicle=function(){this.price =1000;return1000;// 1000 非对象,被忽略,返回的是this对象;如果是return {},则会返回{}};(newVehicle())===1000// false

上面代码中,构造函数

Vehicle

return

语句返回一个数值。这时,

new

命令就会忽略这个

return

语句,返回“构造”后的

this

对象。

但是,如果

return

语句返回的是一个跟

this

无关的新对象,

new

命令会返回这个新对象,而不是

this

对象。这一点需要特别引起注意哈,别说我没提醒你哦

varVehicle=function(){this.price =1000;return{ price:2000};// return的是一个对象,会被返回出去。};(newVehicle()).price
            // 2000

上面代码中,再次重申 构造函数

Vehicle

return

语句,返回的是一个新对象。

new

命令会返回这个对象,而不是

this

对象。

另一方面,如果对普通函数(内部没有

this

关键字的函数)使用

new

命令,则会返回一个空对象。

functiongetMessage(){// 内部沒有this关键字,会返回一个空对象return'this is a message';}var msg =newgetMessage();

            msg // {}typeof msg // "object"

上面代码中,

getMessage

是一个普通函数,返回一个字符串。对它使用

new

命令,会得到一个空对象。这是因为**

new

命令总是返回一个对象,要么是实例对象,要么是

return

语句指定的对象**。本例中,

return

语句返回的是字符串,所以

new

命令就忽略了该语句。

new

命令简化的内部流程,可以用下面的代码详细表示

// 构造函数functionPerson(name,age){this.name = name
                          this.age = age
    }// 自定义_newfunction_new(){// 将 arguments 对象转为数组var args =[].slice.call(arguments);// 取出构造函数var constructor = args.shift();// 创建一个空对象,继承构造函数的 prototype 属性var context = Object.create(constructor.prototype);// 执行构造函数var result = constructor.apply(context, args);// 如果返回结果是对象,就直接返回,否则返回 context 对象return(typeof result ==='object'&& result !=null)? result : context;}// 自定义_new2function_new2(/* 构造函数 */ constructor,/* 构造函数参数 */ params){// 创建一个空对象,继承构造函数的 prototype 属性var context = Object.create(constructor.prototype);// 执行构造函数var result = constructor.apply(context, params);// 如果返回结果是对象,就直接返回,否则返回 context 对象return(typeof result ==='object'&& result !=null)? result : context;// (当用户在构造函数内部自定义返回对象的话则使用该对象,否则返回context)}// 通过自定义_new 返回实例var actor =_new(Person,'张三',28);
                
                actor.name // 张三// 通过自定义_new2 返回实例var actor2 =_new2(Person,['李四',29]);
                actor2.name // 李四// 通过new命令 返回实例var actor3 =newPerson('王五',30)
                actor3.name // 王五

介绍下new.target 属性

构造函数内部可以使用

new.target

属性。如果当前函数是

new

命令调用,

new.target

指向当前函数,否则为

undefined

functionf(){
                      
                      console.log(new.target === f);}f()// falsenewf()// true

使用这个属性,可以**判断函数调用的时候,是否使用

new

命令**。

functionf(){if(!new.target){thrownewError('请使用 new 命令调用!');}// ...}f()// Uncaught Error: 请使用 new 命令调用!

上面代码中,构造函数

f

调用时,没有使用

new

命令,就抛出一个错误。

4、Object.create()创建实例对象

构造函数作为模板,可以生成实例对象。但是,有时拿不到构造函数,只能拿到一个现有的对象。我们希望以这个现有的对象作为模板,生成新的实例对象,这时就可以使用

Object.create()

方法。

// 这个例子没有构造函数,只有一个对象var person1 ={// 这个对象用来生成实例对象,它被当成一个模板
                          name:'张三',
                          age:38,
                          greeting:function(){
        
                          console.log('Hi! I\'m '+this.name +'.');}};var person2 = Object.create(person1);

                 person2.name // 张三
                 person2.greeting()// Hi! I'm 张三.

上面代码中,对象

person1

person2

的模板,后者继承了前者的属性和方法。

Object.create()

的详细介绍,请看后面的文章描述。

二、this关键字

1、涵义

this

关键字是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。

前一章已经提到,

this

可以用在构造函数之中,表示实例对象。除此之外,

this

还可以用在别的场合。但不管是什么场合,

this

都有一个共同点:它总是返回一个对象

在这里插入图片描述

简单说,**

this

就是属性或方法“当前”所在的对象**。

this.property // this代表property属性当前所在的对象

上面代码中,

this

就代表

property

属性当前所在的对象。

下面是一个实际的例子。

var person ={
                        name:'张三',

                      describe:function(){return'姓名:'+this.name;}};

                 person.describe()// "姓名:张三"

上面代码中,

this.name

表示

name

属性所在的那个对象。由于

this.name

是在

describe

方法中调用,而

describe

方法所在的当前对象是

person

,因此

this

指向

person

this.name

就是

person.name

由于对象的属性可以赋给另一个对象,所以属性所在的当前对象是可变的,即

this

的指向是可变的

varA={
                      name:'张三',

                      describe:function(){return'姓名:'+this.name;}};varB={
                      name:'李四'};B.describe =A.describe;/* 此时B的值:
                    B={
                            name: '李四',
                             describe: function () {
                               return '姓名:'+ this.name;
                }
}
*/B.describe()// B内部的this指向B对象// "姓名:李四"

上面代码中,

A.describe

属性被赋给

B

,于是

B.describe

就表示

describe

方法所在的当前对象是

B

,所以

this.name

就指向

B.name

稍稍重构这个例子,

this

的动态指向就能看得更清楚。

functionf(){return'姓名:'+this.name;}varA={
                      name:'张三',
                      describe: f
    };varB={
                       name:'李四',
                      describe: f
    };A.describe()// "姓名:张三"B.describe()// "姓名:李四"

上面代码中,函数

f

内部使用了

this

关键字,随着

f

所在的对象不同,

this

的指向也不同。

只要函数被赋给另一个变量,

this

的指向就会变。

varA={
                      name:'张三',
                      describe:function(){return'姓名:'+this.name;}};var name ='李四';var f =A.describe;f()// "姓名:李四" f函数中的this和name变量所在的对象都为window顶层对象

上面代码中,

A.describe

被赋值给变量

f

,内部的

this

就会指向

f

运行时所在的对象(本例是顶层对象)。

再看一个网页编程的例子。

<input type="text" name="age" size=3 onChange="validate(this, 18, 99);"><script>functionvalidate(obj, lowval, hival){if((obj.value < lowval)||(obj.value > hival))
                 
                   console.log('Invalid Value!');}</script>

上面代码是一个文本输入框,每当用户输入一个值,就会调用

onChange

回调函数,验证这个值是否在指定范围。浏览器会向回调函数传入当前对象,因此

this

就代表传入当前对象(即文本框),然后就可以从

this.value

上面读到用户的输入值。

总结一下,**JavaScript 语言之中,一切皆对象,运行环境也是对象,所以函数都是在某个对象之中运行,

this

就是函数运行时所在的对象(环境)**。这本来并不会让用户糊涂,但是 JavaScript 支持运行环境动态切换,也就是说,

this

的指向是动态的,没有办法事先确定到底指向哪个对象,这才是最让初学者感到困惑的地方。

2、实质

JavaScript 语言之所以有 this 的设计,跟内存里面的数据结构有关系。

var obj ={ foo:5};

上面的代码将一个对象赋值给变量

obj

。JavaScript 引擎会先在内存里面,生成一个对象

{ foo: 5 }

,然后把这个对象的内存地址赋值给变量

obj

。也就是说,变量

obj

是一个地址(reference)。后面如果要读取

obj.foo

,引擎先从

obj

拿到内存地址,然后再从该地址读出原始的对象,返回它的

foo

属性。

在这里插入图片描述
原始的对象以字典结构保存,每一个属性名都对应一个属性描述对象。举例来说,上面例子的

foo

属性,实际上是以下面的形式保存的。

{
              foo:{[[value]]:5[[writable]]:true[[enumerable]]:true[[configurable]]:true}}

注意,

foo

属性的值保存在属性描述对象的

value

属性里面。

这样的结构是很清晰的,问题就在于属性的值可能是一个函数。

var obj ={ foo:function(){}};

这时,引擎会将函数单独保存在内存中,然后再将函数的地址赋值给

foo

属性的

value

属性。

{
                  foo:{[[value]]: 函数的地址
                        ...}}

由于函数是一个单独的值,所以它可以在不同的环境(上下文)执行。

varf=function(){};var obj ={ f: f };// 单独执行f()// obj 环境执行
            obj.f()

JavaScript 允许在函数体内部,引用当前环境的其他变量。

varf=function(){
                  console.log(x);};

上面代码中,函数体里面使用了变量

x

。该变量由运行环境提供。

现在问题又来了,由于函数可以在不同的运行环境执行,所以需要一种机制,能够在函数体内部获得当前的运行环境(context)。所以,

this

这不就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境,这已经很精辟了咯

varf=function(){
                  console.log(this.x);}

上面代码中,函数体里面的

this.x

就是指当前运行环境的

x

varf=function(){
                  console.log(this.x);}var x =1;var obj ={
                  f: f,
                  x:2,};// 单独执行f()// 1  f方法当前运行环境为window对象// obj 环境执行
            obj.f()// 2 f方法当前运行环境为obj对象

上面代码中,函数

f

在全局环境执行,

this.x

指向全局环境的

x

;在

obj

环境执行,

this.x

指向

obj.x

3、使用场合

this

主要有以下几个使用场合。

(1)全局环境

全局环境使用

this

,它指的就是顶层对象

window

this=== window // truefunctionf(){
                   console.log(this=== window);}f()// true

上面代码说明,不管是不是在函数内部,只要是在全局环境下运行,

this

就是指顶层对象

window

(2)构造函数

构造函数中的

this

,指的是实例对象。

varObj=function(p){this.p = p;// this指向实例对象,在实例对象上定义属性p等于p值};var o =newObj('Hello World!');// 通过new构造函数来声明实例对象o
                o.p // "Hello World!"

上面代码定义了一个构造函数

Obj

。由于

this

指向实例对象,所以在构造函数内部定义

this.p

,就相当于定义实例对象有一个

p

属性。

(3)对象的方法

如果对象的方法里面包含

this

this

的指向就是方法运行时所在的对象。该方法赋值给另一个对象,就会改变

this

的指向。

但是,这条规则很不容易把握。请看下面的代码。

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

        obj.foo()// obj

上面代码中,

obj.foo

方法执行时,它内部的

this

指向

obj

但是,下面这几种用法,都会改变

this

的指向。

// 情况一(obj.foo = obj.foo)()// window// 情况二(false|| obj.foo)()// window// 情况三(1, obj.foo)()// window//obj.foo 是一个内存地址,它直接取出了 function () {console.log(this);} ,可以把obj.foo看做function () {console.log(this);}

上面代码中,

obj.foo

就是一个值。这个值真正调用的时候,运行环境已经不是

obj

了,而是全局环境,所以

this

不再指向

obj

,这不就明白了吗
在这里插入图片描述

可以这样理解,JavaScript 引擎内部,**

obj

obj.foo

储存在两个内存地址**,称为地址一和地址二。

obj.foo()

这样调用时,是从地址一调用地址二,因此地址二的运行环境是地址一,

this

指向

obj

。但是,**上面三种情况,都是直接取出地址二进行调用,这样的话,运行环境就是全局环境,因此

this

指向全局环境**。上面三种情况等同于下面的代码。

//obj.foo 是一个内存地址,它直接取出了 function () {console.log(this);} ,可以把obj.foo看做function () {console.log(this);}// 情况一(obj.foo=function(){
               console.log(this);})()// 等同于(function(){
               console.log(this);})()// 情况二(false||function(){
              console.log(this);})()// 情况三(1,function(){
              console.log(this);})()

如果

this

所在的方法不在对象的第一层,这时

this

只是指向当前一层的对象,而不会继承更上面的层。

var a ={
                  p:'Hello',
                  b:{
                    m:function(){
                      console.log(this.p);}}};

                 a.b.m()// undefined

上面代码中,

a.b.m

方法在

a

对象的第二层,该方法内部的

this

不是指向

a

,而是指向

a.b

,因为实际执行的是下面的代码。

var b ={
                  m:function(){
                  console.log(this.p);}};var a ={
                  p:'Hello',
                  b: b
    };(a.b).m()// 等同于 b.m()

如果要达到预期效果,只有写成下面这样。

var a ={
                  b:{
                  m:function(){
                      console.log(this.p);},
            p:'Hello'}};

如果这时将嵌套对象内部的方法赋值给一个变量,

this

依然会指向全局对象。

var a ={
                    b:{
                    m:function(){
                          console.log(this.p);},
                    p:'Hello'}};var hello = a.b.m;// 把方法的内存地址赋值给了hellohello()// undefined  内部this指向window

上面代码中,

m

是多层对象内部的一个方法。为求简便,将其赋值给

hello

变量,结果调用时,

this

指向了顶层对象。为了避免这个问题,可以只将

m

所在的对象赋值给

hello

,这样调用时,

this

的指向就不会变。

var hello = a.b;
                hello.m()// Hello   this指向不变

4、使用时要注意点

(1)避免多层 this

由于

this

的指向是不确定的,所以切勿在函数中包含多层的

this

var o ={
                  f1:function(){
                    console.log(this);// this指向o对象varf2=function(){// 方法会另起一个内存地址
                      console.log(this);// this指向window对象}();}}

                 o.f1()// Object// Window

上面代码包含两层

this

,结果运行后,第一层指向对象

o

,第二层指向全局对象,因为实际执行的是下面的代码。

vartemp=function(){
                    console.log(this);};var o ={
                    f1:function(){

                    console.log(this);var f2 =temp();}}

一个解决方法是在第二层改用一个指向外层

this

的变量。

var o ={
                  f1:function(){

                  console.log(this);var that =this;// 使用变量保存thisvarf2=function(){
 
                   console.log(that);}();}}

                  o.f1()// Object// Object

上面代码定义了变量

that

,固定指向外层的

this

,然后在内层使用

that

,就不会发生

this

指向的改变。

事实上,使用一个变量固定

this

的值,然后内层函数调用这个变量,是非常常见的做法,请务必掌握。

JavaScript 提供了严格模式,也可以硬性避免这种问题。严格模式下,如果函数内部的

this

指向顶层对象,就会报错。

var counter ={
                  count:0};
                counter.inc=function(){'use strict';this.count++};var f = counter.inc;// 这里直接取出方法的内存地址赋值给f,运行环境为windowf()// TypeError: Cannot read property 'count' of undefined

上面代码中,

inc

方法通过

'use strict'

声明采用严格模式,这时内部的

this

一旦指向顶层对象,就会报错。

(2)避免数组处理方法中的 this

数组的

map

foreach

方法,允许提供一个函数作为参数。这个函数内部不应该使用

this

var o ={
                  v:'hello',
                  p:['a1','a2'],
                  f:functionf(){this.p.forEach(function(item){// 这个方法的运行环境为window
                          console.log(this.v +' '+ item);});}}

                 o.f()// undefined a1// undefined a2

上面代码中,

foreach

方法的回调函数中的

this

,其实是指向

window

对象,因此取不到

o.v

的值。原因跟上一段的多层

this

是一样的,就是内层的

this

不指向外部,而指向顶层对象。

解决这个问题的一种方法,就是前面提到的,使用中间变量固定

this

var o ={
        
              v:'hello',
              p:['a1','a2'],
              f:functionf(){var that =this;this.p.forEach(function(item){
                      console.log(that.v+' '+item);});}}

              o.f()// hello a1// hello a2

另一种方法是将

this

当作

foreach

方法的第二个参数,固定它的运行环境。

var o ={
              v:'hello',
              p:['a1','a2'],
              f:functionf(){this.p.forEach(function(item){
                 console.log(this.v +' '+ item);},this);}}

                o.f()// hello a1// hello a2

还有种叫ES6箭头函数

var o ={
              v:'hello',
              p:['a1','a2'],
              f:functionf(){this.p.forEach((item)=>{// 箭头函数使this指向为o对象
              console.log(this.v+' '+item);});}}

              o.f()// hello a1// hello a2

(3)避免回调函数中的 this

回调函数中的

this

往往会改变指向,最好避免使用。

var o =newObject();
            o.f=function(){
                  console.log(this=== o);}// jQuery 的写法$('#button').on('click', o.f);

上面代码中,点击按钮以后,控制台会显示

false

。原因是此时

this

不再指向

o

对象,而是指向按钮的 DOM 对象,因为

f

方法是在按钮对象的环境中被调用的。这种细微的差别,很容易在编程中忽视,导致难以察觉的错误,所以千万小心啊
在这里插入图片描述

为了解决这个问题,可以采用下面的一些方法对

this

进行绑定,也就是使得

this

固定指向某个对象,减少不确定性。

5、绑定 this 的方法

this

的动态切换,固然为 JavaScript 创造了巨大的灵活性,但也使得编程变得困难和模糊。有时,需要把

this

固定下来,避免出现意想不到的情况。JavaScript 提供了

call

apply

bind

这三个方法,来切换/固定

this

的指向。

Function.prototype.call()

函数实例的

call

方法,可以**指定函数内部

this

的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。**

var obj ={};varf=function(){returnthis;};f()=== window // true
                f.call(obj)=== obj // true 使函数内this指向obj,相当于把函数放入obj对象内运行。

上面代码中,全局环境运行函数

f

时,

this

指向全局环境(浏览器为

window

对象);

call

方法可以改变

this

的指向,指定

this

指向对象

obj

,然后在对象

obj

的作用域中运行函数

f

**

call

方法的参数,应该是一个对象**。如果参数为空、

null

undefined

,则默认传入全局对象

var n =123;var obj ={ n:456};functiona(){
                      console.log(this.n);}// 参数为空、null、undefined时默认传入全局对象
                a.call()// 123
                a.call(null)// 123
                a.call(undefined)// 123

                a.call(window)// 123

                a.call(obj)// 456

上面代码中,

a

函数中的

this

关键字,如果指向全局对象,返回结果为

123

。如果使用

call

方法将

this

关键字指向

obj

对象,返回结果为

456

。可以看到,如果

call

方法没有参数,或者参数为

null

undefined

,则等同于指向全局对象。

如果

call

方法的参数是一个原始值,那么这个原始值会自动转成对应的包装对象,然后传入

call

方法。

varf=function(){returnthis;};

                 f.call(5)// Number {[[PrimitiveValue]]: 5} // Number的实例对象

上面代码中,

call

的参数为

5

,不是对象,会被自动转成包装对象(

Number

的实例),绑定

f

内部的

this

call

方法还可以接受多个参数。

语法

                func.call(thisValue, arg1, arg2,...)// 第一个参数thisValue为函数内this将要指向的对象// 其余参数为传入函数的参数
call

的第一个参数就是

this

所要指向的那个对象,后面的参数则是函数调用时所需的参数。

functionadd(a, b){return a + b;}

                add.call(this,1,2)// 3

上面代码中,

call

方法指定函数

add

内部的

this

绑定当前环境(对象),并且参数为

1

2

,因此函数

add

运行后得到

3

应用:调用对象的原生方法
call

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

var obj ={};
                    obj.hasOwnProperty('toString')// false 判断obj是否有toString属性,注意这里不是toString()方法// 覆盖掉继承的 hasOwnProperty 方法
                    obj.hasOwnProperty=function(){returntrue;};
                    obj.hasOwnProperty('toString')// true

                    Object.prototype.hasOwnProperty.call(obj,'toString')// false

上面代码中,

hasOwnProperty

obj

对象继承的方法,如果这个方法一旦被覆盖,就不会得到正确结果。

在这里插入图片描述

call

方法可以解决这个问题,它把

hasOwnProperty

方法的原始定义放到

obj

对象上执行,这样无论

obj

上有没有同名方法,都不会影响结果

var objArr ={// 类数组对象0:'a',1:'b',2:'c',
                        length:3}var arr = Array.prototype.slice.call(objArr)// 执行数组的slice方法,并把obj指定为方法的this// 或 arr = [].slice.call(obj)

                arr // ['a','b','c']

上面代码中,

objArr

是一个类似数组的对象,使用

call

调用数组的

slice

方法,指定

objArr

slice

方法内部的

this

slice

方法返回值赋给

arr

另外来看看数组

slice

方法的内部实现原理


            Array.prototype.slice=function(start,end){//数组方法slice的底层内部实现var result =newArray();//新数组var start = start ||0;var end = end ||this.length;//this指向调用的对象,用了call之后,改变this的指向,指向传进来的对象for(var i=start; i<end; i++){
                    result.push(this[i]);}return result;//返回的为一个新的数组}

Function.prototype.apply()

apply

方法的作用与

call

方法类似,也是改变

this

指向,然后再调用该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数,使用格式如下。

语法

            func.apply(thisValue,[arg1, arg2,...])// 第一个参数thisValue为函数内this将要指向的对象// 第二个参数为一个数组,数组每一项为传入函数的参数
apply

方法的第一个参数也是

this

所要指向的那个对象,如果设为

null

undefined

,则等同于指定全局对象。第二个参数则是一个数组,该数组的所有成员依次作为参数,传入原函数。原函数的参数,在

call

方法中必须一个个添加,但是在

apply

方法中,必须以数组形式添加。

functionf(x, y){
                  console.log(x + y);}

            f.call(null,1,1)// 2
            f.apply(null,[1,1])// 2

上面代码中,

f

函数本来接受两个参数,使用

apply

方法以后,就变成可以接受一个数组作为参数。

利用这一点,可以做一些有趣的应用。

如何应用
(1)获取数组最大/最小元素

JavaScript 不提供找出数组最大元素的函数。结合使用

apply

方法和

Math.max/Math.min

方法,就可以返回数组的最大/最小元素。

利用第二个参数为数组的特点

// 获取最大值var a =[10,2,4,15,9];
                Math.max.apply(null, a)// 15//Math.max方法获取最大值//Math.max(10, 2, 4, 15, 9) // 15// 获取最小值var a =[10,2,4,15,9];
                Math.min.apply(null, a)// 15    null等于绑定全局对象
(2)将数组的空元素变为
undefined

通过

apply

方法,利用

Array

构造函数将数组的空元素变成

undefined


                Array.apply(null,['a',,'b'])// [ 'a', undefined, 'b' ]

空元素与

undefined

的差别在于,数组的

forEach

方法会跳过空元素,但是不会跳过

undefined

。因此,遍历内部元素的时候,会得到不同的结果。

var a =['a',,'b'];functionprint(i){
                          console.log(i);}

                a.forEach(print)// a// b

                Array.apply(null, a).forEach(print)// a// undefined// b
(3)转换类似数组的对象

另外,利用数组对象的

slice

方法,可以将一个类似数组的对象(比如

arguments

对象)转为真正的数组。

和使用

call

方法的效果一样。


            Array.prototype.slice.apply({0:1, length:1})// [1]
            Array.prototype.slice.apply({0:1})// []
            Array.prototype.slice.apply({0:1, length:2})// [1, undefined]
            Array.prototype.slice.apply({length:1})// [undefined]

上面代码的

apply

方法的参数都是对象,但是返回结果都是数组,这就起到了将对象转成数组的目的。从上面代码可以看到,这个方法起作用的前提是,被处理的对象必须有

length

属性,以及相对应的数字键。

(4)绑定回调函数的对象

前面的按钮点击事件的例子,可以改写如下。

var o =newObject();

            o.f=function(){
                  console.log(this=== o);// true  ,如未改变this指向,this将指向 DOM 对象}varf=function(){
              o.f.apply(o);// 或者 o.f.call(o);};// jQuery 的写法$('#button').on('click', f);

上面代码中,点击按钮以后,控制台将会显示

true

。由于

apply

方法(或者

call

方法)不仅绑定函数执行时所在的对象,还会立即执行函数,因此不得不把绑定语句写在一个函数体内。更简洁的写法是采用下面介绍的

bind

方法。

Function.prototype.bind()

bind

方法用于将函数体内的

this

绑定到某个对象,然后返回一个新函数,bind方法并非立即执行一个函数。

语法

            func.bind(thisValue, arg1, arg2,...)()// 第一个参数thisValue为函数内this将要指向的对象// 其余参数为传入函数的参数// bind方法返回一个新函数,并非立即执行,如需执行要在后面加个括号
var d =newDate();
            d.getTime()// 1481869925657var print = d.getTime;print()// Uncaught TypeError: this is not a Date object.

上面代码中,我们将

d.getTime

方法赋给变量

print

,然后调用

print

就报错了。这是因为

getTime

方法内部的

this

,绑定

Date

对象的实例,赋给变量

print

以后,内部的

this

已经不指向

Date

对象的实例了。

bind

方法可以解决这个问题哈

var print = d.getTime.bind(d);print()// 1481869925657

上面代码中,

bind

方法将

getTime

方法内部的

this

绑定到

d

对象,这时就可以安全地将这个方法赋值给其他变量了。

bind

方法的参数就是所要绑定

this

的对象,下面是一个更清晰的例子。

var counter ={
                  count:0,
                  inc:function(){this.count++;}};var func = counter.inc.bind(counter);func();
                            counter.count // 1

上面代码中,

counter.inc

方法被赋值给变量

func

。这时必须用

bind

方法将

inc

内部的

this

,绑定到

counter

,否则就会出错。

this

绑定到其他对象也是可以的。

var counter ={
                      count:0,
                      inc:function(){this.count++;}};var obj ={
                      count:100};var func = counter.inc.bind(obj);func();
                        obj.count // 101

上面代码中,

bind

方法将

inc

方法内部的

this

,绑定到

obj

对象。结果调用

func

函数以后,递增的就是

obj

内部的

count

属性。

bind

还可以接受更多的参数,将这些参数绑定原函数的参数。

varadd=function(x, y){return x *this.m + y *this.n;}var obj ={
                  m:2,
                  n:2};var newAdd = add.bind(obj,5);// 第二个参数为add内的xnewAdd(5)// 20 传入的参数为add内的y

上面代码中,

bind

方法除了绑定

this

对象,还将

add

函数的第一个参数

x

绑定成

5

,然后返回一个新函数

newAdd

,这个函数只要再接受一个参数

y

就能运行了。

如果

bind

方法的第一个参数是

null

undefined

,等于将

this

绑定到全局对象,函数运行时

this

指向顶层对象(浏览器为

window

)。

functionadd(x, y){return x + y;}var plus5 = add.bind(null,5);plus5(10)// 15  传入的参数为add内的y

上面代码中,函数

add

内部并没有

this

,使用

bind

方法的主要目的是绑定参数

x

,以后每次运行新函数

plus5

,就只需要提供另一个参数

y

就够了。而且因为

add

内部没有

this

,所以

bind

的第一个参数是

null

,不过这里如果是其他对象,也没有影响。

bind要注意的点:
(1)每一次返回一个新函数
bind

方法每运行一次,就返回一个新函数,这会产生一些问题。比如,监听事件的时候,不能写成下面这样。


                element.addEventListener('click', o.m.bind(o));

上面代码中,

click

事件绑定

bind

方法生成的一个匿名函数。这样会导致无法取消绑定,所以,下面的代码是无效的。


                element.removeEventListener('click', o.m.bind(o));

正确的方法是写成下面这样:

var listener = o.m.bind(o);
                element.addEventListener('click', listener);//  ...
                element.removeEventListener('click', listener);
(2)结合回调函数使用

回调函数是 JavaScript 最常用的模式之一,但是一个常见的错误是,将包含

this

的方法直接当作回调函数。解决方法就是使用

bind

方法,将

counter.inc

绑定

counter

var counter ={
                      count:0,
            
                  inc:function(){'use strict';this.count++;}};functioncallIt(callback){callback();}callIt(counter.inc.bind(counter));
                counter.count // 1

上面代码中,

callIt

方法会调用回调函数。这时如果直接把

counter.inc

传入,调用时

counter.inc

内部的

this

就会指向全局对象。使用

bind

方法将

counter.inc

绑定

counter

以后,就不会有这个问题,

this

总是指向

counter

还有一种情况比较隐蔽,就是某些数组方法可以接受一个函数当作参数。这些函数内部的

this

指向,很可能也会出错的哈

在这里插入图片描述

var obj ={
                      name:'张三',
                       times:[1,2,3],
 
                      print:function(){this.times.forEach(function(n){// 数组的forEach方法内部this指向问题
                                  console.log(this.name);// 这里的this指向全局对象});}};

                    obj.print()// 没有任何输出

上面代码中,

obj.print

内部

this.times

this

是指向

obj

的,这个没有问题。但是,

forEach

方法的回调函数内部的

this.name

却是指向全局对象,导致没有办法取到值。稍微改动一下,就可以看得更清楚。


                obj.print=function(){this.times.forEach(function(n){
                                console.log(this=== window);});};

                obj.print()// true// true// true

解决这个问题,也是通过

bind

方法绑定

this


                obj.print=function(){this.times.forEach(function(n){
                                    console.log(this.name);}.bind(this));// 使用bind把this指向的obj对象传入方法内};

                obj.print()// 张三// 张三// 张三
(3)结合
call

方法使用(改写数组方法调用形式)

利用

bind

方法,可以改写一些 JavaScript 原生方法的使用形式,以数组的

slice

方法为例。

[1,2,3].slice(0,1)// [1]// 等同于
                Array.prototype.slice.call([1,2,3],0,1)// [1]

上面的代码中,数组的

slice

方法从

[1, 2, 3]

里面,按照指定位置和长度切分出另一个数组。这样做的本质是在

[1, 2, 3]

上面调用

Array.prototype.slice

方法,因此可以用

call

方法表达这个过程,得到同样的结果。

call

方法实质上是调用

Function.prototype.call

方法,因此上面的表达式可以**用

bind

方法改写**。

varslice= Function.prototype.call.bind(Array.prototype.slice);slice([1,2,3],0,1)// [1]

上面代码的含义就是,将

Array.prototype.slice

变成

Function.prototype.call

方法所在的对象,调用时就变成了

Array.prototype.slice.call

。类似的写法还可以用于其他数组方法。

varpush= Function.prototype.call.bind(Array.prototype.push);varpop= Function.prototype.call.bind(Array.prototype.pop);var a =[1,2,3];push(a,4)
                    a // [1, 2, 3, 4]pop(a)
                    a // [1, 2, 3]

如果再进一步,将

Function.prototype.call

方法绑定到

Function.prototype.bind

对象,就意味着

bind

的调用形式也可以被改写。

functionf(){
                      console.log(this.v);}var o ={ v:123};varbind= Function.prototype.call.bind(Function.prototype.bind);bind(f, o)()// 123

上面代码的含义就是,将

Function.prototype.bind

方法绑定在

Function.prototype.call

上面,所以

bind

方法就可以直接使用,不需要在函数实例上使用。

总结,call()、apply()、bind()的区别

这三个方法都是改变函数内部this指向的

它们的区别是:

call()第一个参数为函数内this将要指向的对象,其余参数为传入函数的参数。

apply()第一个参数为函数内this将要指向的对象,第二个参数为数组,数组每一项为传入函数的参数。

bind()传入参数和call()一样,区别是bind()返回一个新的函数,并非立即执行

在这里插入图片描述

五 文档

学习文档:https://wangdoc.com/javascript/

🎯 求关注

更多干货请公众号:龙哥手记 点击「加群进阶」, 进龙歌唯一的读者群。
如果有错误或者不严谨的地方,请务必得出指正,非常感谢。如果喜欢或者 有所启发,欢迎star, 对作者也是一种鼓励。
跟着龙哥一起掉亿点点秀发吧~, `别忘给我点赞 大帅比大漂亮们再走啊!!!


本文转载自: https://blog.csdn.net/weixin_45817252/article/details/123431325
版权归原作者 龙哥手记 所有, 如有侵权,请联系我们删除。

“JS高级程序语言设计-第五天打卡-实战上彻底搞懂JS面对对象上篇-龙哥手记”的评论:

还没有评论