JS基础入门篇（三十五）—面向对象（二）

如果没有面向对象这种抽象概念的小伙伴&＃xff0c;建议先看一下我写的
JS基础入门篇&＃xff08;三十四&＃xff09;—面向对象&＃xff08;一&＃xff09;????

1.非常非常重要而又简单的概念—原型链

想要以下为 f 添加一个say方法&＃xff0c;有三种方法。

方法一&＃xff1a;相当于添加一个自定义属性&＃xff0c;此属性是一个方法。

方法二&＃xff1a;为构造函数.prototype添加一个say方法。

方法三&＃xff1a;为Object.prototype添加一个say方法。

疑问?️&＃xff1a;方法二中挂在构造函数的方法&＃xff0c;和方法三中挂在Object的方法&＃xff0c; f 为什么能查找的到&＃xff1f;&＃xff1f;&＃xff1f;

解析&＃xff08;此解析一定要看懂&＃xff0c;没有看懂多看几遍或者百度下&＃xff09;&＃xff1a;
是原型链的概念。就是js内部的查找机制。首先要明白&＃xff1a;

1.prototype 原型

当一个函数被申明的时候&＃xff0c;该函数下默认有一个属性&＃xff1a;prototype&＃xff0c;该属性的值是一个对象。

举例说明&＃xff1a;

结果如图所示&＃xff1a;
图片描述

2.__proto__

当一个对象被创建的时候&＃xff0c;该对象会自动被添加上一个属性&＃xff1a;__proto__&＃xff0c;他的值也是一个对象&＃xff0c;并且该属性就是当前这个对象的构造函数的prototype

举例说明&＃xff1a;

结果如图所示&＃xff1a;
图片描述

3.对象.__proto__ &＃61;&＃61;&＃61; 构造函数.prototype

举例说明

结果如图所示&＃xff1a;
图片描述

所以查找机制为&＃xff1a;
调用f.say( );时

if&＃xff08; 对象 f上面是否say方法 &＃xff09;{//为真&＃xff0c;执行if内部的代码则调用f上面的say方法 }else if(Fn.prototype是否有say方法){//为真&＃xff0c;执行else if内部的代码第一步&＃xff1a;f.__proto__ &＃61;&＃61;&＃61; Fn.prototype由这个查找到f对应的构造函数的原型&＃xff0c;即为 Fn.prototype。第二步&＃xff1a;查看Fn.prototype是否有say方法&＃xff0c;有的话&＃xff0c;则调用Fn.prototype是上面的say方法。}else if( Object.prototype是否有say方法 ){第一步&＃xff1a;Fn.prototype.__proto__ &＃61;&＃61;&＃61; Object.prototype由这个查找到Fn.prototype对应的构造函数的原型&＃xff0c;即为 Object.prototype。第二步&＃xff1a;Object.prototype是否有say方法&＃xff0c;有的话&＃xff0c;则调用Object.prototype是上面的say方法。}else{//如果以上都没有say方法会报错。 }

举例说明

2.hasOwnProperty, constructor, instanceof

1.hasOwnPropert ???

作用用来判断某个对象是否含有指定的自身属性语法boolean object.hasOwnProperty(prop)参数object要检测的对象prop要检测的属性名称。注意&＃xff1a;不会沿着原型链查找属性&＃xff0c;只查找自身属性

如果以上文字都看不懂&＃xff0c;可以先看例子&＃xff0c;再看文字。

2.constructor ???

函数的原型prototype的值是一个对象&＃xff0c;初始化会有一个属性为constructor&＃xff0c;对应的值为拥有这个原型的函数注意&＃xff1a;prototype的值是可以修改的&＃xff0c;修改了prototype的值&＃xff0c;要手动将constructor指向函数

3.instanceof???

instanceof是一个二元运算符,返回布尔值运算检测一个对象原型是否在要检测的对象的原型链上使用&＃xff1a;object instanceof constructor

3.this的指向

1.谁调用就指向谁。
2.谁触发就指向谁。
举例说明1

举例说明2

4.修改this指向的三种方式

1.call

1. 函数**&＃96;会&＃96;**立刻执行 2. 函数执行时候,函数**&＃96;第一个参数&＃96;**是内部的**&＃96;this指向&＃96;** 3. **&＃96;第一个参数之后的参数,都是指函数执行时候 ,内部的实参&＃96;**

直接撸代码&＃xff0c;举例说明

2.bind

1. 函数**&＃96;不会&＃96;**立刻执行 2. 函数执行时候,**函数第一个参数是内部的this指向** 3. **第一个参数之后的参数,都是指函数执行时候 ,内部的实参** 4. **&＃96;返回的是修改了 this指向的新函数&＃96;**与call的区别就是函数不会立刻执行。

举例说明

3.apply

与call很相似&＃xff0c;只是第二个参数值接受数组

举例说明

5.数组的检测

因为由typeof打印出来&＃xff0c;数组和对象的结果都是object。有时候我们需要判断变量是否是数组。

方法一&＃xff1a;

var arr &＃61; [1,2,3];console.log( arr.toString() );//1,2,3Array.prototype.toString &＃61; Object.prototype.toString;//重新赋值Array.prototype.toString的方法。但是下次在别的情况调用Array.prototype.toString&＃xff0c;此方法已被重新覆盖。所以不太好console.log( arr.toString() );//[object Array]

var arr &＃61; [1,2,3];

console.log( Object.prototype.toString.call(arr) );

// 使用 Object.prototype.toString
// 同时修改内部的this指向 arr

console.log( arr );//[object Array]

方法二&＃xff1a;