js中的对象学习笔记

叁歲伎倆 2023-10-09 14:06 53阅读 0赞

## **一、object类型** ##

1.  \{
2.  k : v,
3.  k : v,
4.  k : v,
5.  k : v <-----注意这里最后一个没有逗号很容易出错！！！格式严谨！！！

JSON要比对象字面量，要严格，严格在哪儿呢？就是所有的k，必须加引号。

JSON：

但是，下面的特殊情况，这个k必须加引号：

k是特殊字符

k是数字

k是有空格

k是关键字、保留字

先说一下，上面这些情况，也同时不能使用点语法来访问属性了，比如使用方括号：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>var obj = { </li> 
     <li>name : "考拉"</li> 
     <li>}</li> 
     <li>console.log(obj<span style="color:#ff0000;">["name"]</span>);</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

特殊形式的k，必须要加上引号，检索属性的时候，必须用方括号：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>var obj = { </li> 
     <li><strong><span style="color:#ff0000;"><strong>"</strong></span></strong>24&amp;*$&amp;#@@)@!<strong><span style="color:#ff0000;"><strong>"</strong></span></strong>&nbsp;: "哈哈",</li> 
     <li><strong><span style="color:#ff0000;"><strong>"</strong></span></strong>all name<strong><span style="color:#ff0000;"><strong>"</strong></span></strong>&nbsp;: "考拉",</li> 
     <li><strong><span style="color:#ff0000;"><strong>"</strong></span></strong>++++%%%%<strong><span style="color:#ff0000;"><strong>"</strong></span></strong>&nbsp;: "嘻嘻",</li> 
     <li><strong><span style="color:#ff0000;"><strong>"</strong></span></strong>var<strong><span style="color:#ff0000;"><strong>"</strong></span></strong>&nbsp;: "么么哒",</li> 
     <li><strong><span style="color:#ff0000;"><strong>"</strong></span></strong>function<strong><span style="color:#ff0000;"><strong>"</strong></span></strong>&nbsp;: "嘻嘻"</li> 
     <li>}</li> 
     <li></li> 
     <li>console.log(obj<strong><span style="color:#ff0000;"><strong>["24&amp;*$&amp;#@@)@!"]</strong></span></strong>);</li> 
     <li>console.log(obj<strong><span style="color:#ff0000;"><strong>["all name"]</strong></span></strong>);</li> 
     <li>console.log(obj<strong><span style="color:#ff0000;"><strong>["++++%%%%"]</strong></span></strong>);</li> 
     <li>console.log(obj<strong><span style="color:#ff0000;"><strong>["var"]</strong></span></strong>);</li> 
     <li>console.log(obj<strong><span style="color:#ff0000;"><strong>["function"]</strong></span></strong>);</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

对象的属性的访问，点语法是有局限的，它不能访问上面的特殊的那些情况。也不能访问以变量保存的k：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>var obj = { </li> 
     <li>name : "考拉",</li> 
     <li>age : 18,</li> 
     <li>sex : "男",</li> 
     <li>"study score" : 100</li> 
     <li>}</li> 
     <li></li> 
     <li><span style="color:#767171;">//console.log(obj."study score");//错误的</span></li> 
     <li>console.log(obj<span style="color:#ff0000;">["study score"]</span>); //正确的</li> 
     <li>console.log(obj<span style="color:#ff0000;">["a" + "ge"]</span>); //正确的</li> 
     <li><span style="color:#ff0000;">var a = "sex";</span></li> 
     <li>console.log(obj<span style="color:#ff0000;">[a]</span>); //正确的</li> 
     <li>&lt;/script&gt;</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

1.  var obj = new Object(); //这是一个空对象，里面没有任何属性

构造函数方式：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li><span style="color:#ff0000;">var obj = new Object();</span></li> 
     <li>obj.name = "考拉";</li> 
     <li>obj.age = 18;</li> 
     <li>obj.sex = "男";</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

## **二、对象的方法** ##

当一个对象的属性的值，是一个函数，那么这个函数我们就称为对象的“方法”(method)。

方法就是一个对象能够做的事情，一般来说，就是一个动词。比如小明打招呼、长大、变性方法。

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>var xiaoming = { </li> 
     <li>name : "小明",</li> 
     <li>age : 18,</li> 
     <li>sex : "男",</li> 
     <li><span style="color:#ff0000;">sayHello : function(){ </span></li> 
     <li><span style="color:#ff0000;">alert("你好，我是" + this.name);</span></li> 
     <li><span style="color:#ff0000;">alert("今年" + this.age + "岁了");</span></li> 
     <li><span style="color:#ff0000;">alert("我是可爱的小" + this.sex + "生");</span></li> 
     <li><span style="color:#ff0000;">}</span></li> 
     <li>}</li> 
     <li></li> 
     <li>xiaoming.sayHello();</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

一个对象，方法函数里面的this指的是这个对象。

*  **构造函数**

注意，我们学习Java、C++、C\#语言的惯例，构造函数以大写字母开头。

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>function <span style="color:#ff0000;">P</span>eople(){ </li> 
     <li>}</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

JavaScript规定，一个函数可以用new关键字来调用。那么此时将按顺序发生四件事情：

1）隐秘的创建一个新的空对象

2）将这个函数里面的this绑定到刚才创建隐秘新对象上

3）执行函数体里面的语句

4）返回这个新的对象

我们称呼这个函数，叫做构造函数，一般的，构造函数用大写字母开头。也叫作People“类”。

我们称呼xiaoming这个对象是People类的实例。

当一个函数用()调用的时候，this就是window

当一个函数用对象方法调用的时候，this就是这个对象

当一个函数绑定给一个HTML元素事件的时候，this就是这个HTML元素

当一个函数用定时器调用的时候，this就是window

当一个函数用apply、call调用的时候，this就是你指定这个东西

当一个函数用new调用的时候，this就是隐秘创建的空对象，函数里面的语句将被执行，并且返回新对象

1.People.prototype = \{

name : "考拉",

sex : "男",

age : 18

1.  People.prototype.name=”考拉”

两种赋值方法

<table style="margin-left:6.75pt;width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li><span style="color:#00b050;">//构造函数，构造函数里面没有任何语句，也就是说，这个构造函数在执行的时候，不会给创建出来的对象添加任何属性。</span></li> 
     <li>function People(){ </li> 
     <li></li> 
     <li>}</li> 
     <li><span style="color:#00b050;">//构造函数的原型，我们更改了构造函数的原型，为一个新的对象：</span></li> 
     <li>People.prototype = { </li> 
     <li>name : "考拉",</li> 
     <li>sex : "男",</li> 
     <li>age : 18</li> 
     <li>}</li> 
     <li></li> 
     <li><span style="color:#00b050;">//当一个对象被new出来的时候，不仅仅执行了构造函数里面的语句，也会把这个函数的__proto__指向构造函数的prototype。</span></li> 
     <li>var xiaoming = new People();</li> 
     <li></li> 
     <li>console.log(xiaoming.__proto__);</li> 
     <li>console.log(xiaoming.__proto__ == People.prototype);</li> 
     <li></li> 
     <li><span style="color:#00b050;">//当我们试图访问name、sex、age属性的时候，身上没有。那么就去查找原型，原型身上有，就当做了自己的属性返回了。</span><span style="color:#0000ff;">说明给原型对象加了属性以后 构造函数身上却没有这个属性</span></li> 
     <li>console.log(xiaoming.name);</li> 
     <li>console.log(xiaoming.sex);</li> 
     <li>console.log(xiaoming.age);</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

通过构造函数出来的对象给原型对象加属性以后，后面通过构造函数构造的对象都有这个原型对象的属性

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

当我们试图访问一个对象身上的属性的时候，如果这个对象身上有这个属性，则返回它的值。如果它身上没有这个属性，那么将访问它的原型对象，检测它的原型对象身上是否有这个值，如果有返回它原型对象身上的这个值。

### **4.2 原型的用途** ###

我们定义一个方法的时候，如果写在构造函数里面：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>function People(name,age){ </li> 
     <li>this.name = name;</li> 
     <li>this.age = age;</li> 
     <li><span style="color:#ff0000;">this.sayHello = function(){ </span></li> 
     <li><span style="color:#ff0000;">alert("你好,我是" + this.name + "我今年" + this.age + "岁了");</span></li> 
     <li><span style="color:#ff0000;">}</span></li> 
     <li>}</li> 
     <li></li> 
     <li>var xiaoming = new People("小明",12);</li> 
     <li>var xiaohong = new People("小红",11);</li> 
     <li></li> 
     <li>xiaoming.sayHello();</li> 
     <li>xiaohong.sayHello();</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

实际上这个函数被复制了两份，一份给了xiaoming，一份给了xiaohong。xiaoming和xiaohong这两个实例身上有了相同功能的函数，但是这个函数不是同一个函数！

而函数天生要被复用，你没有复用函数：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>alert(xiaoming.sayHello == xiaohong.sayHello); <strong><span style="color:#ff0000;"><strong>//false</strong></span></strong></li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

xiaoming身上的函数，和xiaohong身上的函数，不是同一个函数。

那应该怎么办呢？一句话：所有的属性要绑在对象身上，而所有的方法，定义在对象的原型对象中：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>function People(name,age){ </li> 
     <li><span style="color:#ff0000;">//构造函数里面，负责定义一些属性，随着构造函数的执行，这些属性将绑定到new出来的对象身上</span></li> 
     <li>this.name = name;</li> 
     <li>this.age = age;</li> 
     <li>}</li> 
     <li><span style="color:#ff0000;">//把所有的方法，定义在原型对象身上：</span></li> 
     <li>People.prototype.sayHello = function(){ </li> 
     <li>alert("你好,我是" + this.name + "我今年" + this.age + "岁了");</li> 
     <li>}</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>alert(xiaoming.sayHello == xiaohong.sayHello);</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 2][] 证明了xiaoming的sayHello方法和xiaohong的，是同一个函数。内存消耗小很多。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>People.prototype.constructor //指向构造函数</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

我们之前说过，一个对象的原型身上有什么，那么实例对象就也可以打点调用什么，所以：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>xiaoming.constructor &nbsp;&nbsp;//指向构造函数</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

只要是对象，一定有原型对象，就是说只要这个东西是个对象，那么一定有\_\_proto\_\_属性。

世界上只有一个对象没有原型对象，这个对象就是Object.prototype。

Object是一个函数，是系统内置的构造函数，用于创造对象的。Object.prototype是所有对象的原型链终点。

所以，当我们在一个对象上打点调用某个方法的时候，系统会沿着原型链去寻找它的定义，一直找到Object.prototype。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

所有的引用类型值，都有内置构造函数。比如

new Object()

new Array()

new Function()

new RegExp()

new Date()

我们来看看数组的情况：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

函数也是对象。JavaScript中函数是一等公民，函数是对象。函数也是对象，只不过自己能()执行。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

基本类型值，也有包装类型。所谓包装类型，就是它的构造函数。

new Number()

new String()

new Boolean()

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

所以你就能明白，为毛毛”abc”能够调用indexOf()方法，是因为String.prototype身上有这个方法。

们有两种写法去往构造函数的原型身上加方法：

第一种，追加属性：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>Dog.prototype.sayHello = function(){ </li> 
     <li>alert(this.name);</li> 
     <li>}</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

第二种，简单粗暴直接覆盖整个原型：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>Dog.prototype = { </li> 
     <li>sayHello : function(){ </li> 
     <li>alert(this.name + this.age);</li> 
     <li>}</li> 
     <li>}</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

第二种的方法，有隐患，就是你的构造函数的原型(Dog.prototype)与构造函数(Dog)失联了。无法通过Dog.prototype.constructor访问构造函数Dog了。这是因为对象字面量的constructor一定是Object

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

简单粗暴法就是有这个弊端，如何解决呢？如果你觉得constructor真的这么重要，那么就补一个constructor属性就行了：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>Dog.prototype = { </li> 
     <li><span style="color:#ff0000;">constructor : Dog,</span></li> 
     <li>sayHello : function(){ </li> 
     <li>alert(this.name + this.age);</li> 
     <li>}</li> 
     <li>}</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

**子类的prototype等于父亲的某个实例**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

来看一个具体案例：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function People(name,age,sex){ </li> 
     <li>this.name = name;</li> 
     <li>this.age = age;</li> 
     <li>this.sex = sex;</li> 
     <li>}</li> 
     <li>People.prototype.sayHello = function(){ </li> 
     <li>alert("你好我是人" + this.name);</li> 
     <li>}</li> 
     <li>People.prototype.chifan = function(){ </li> 
     <li>alert("我吃饭了！mia mia");</li> 
     <li>}</li> 
     <li></li> 
     <li></li> 
     <li>function Student(name,age,sex,xuehao,xiaohonghuageshu){ </li> 
     <li>this.name = name;</li> 
     <li>this.age = age;</li> 
     <li>this.sex = sex;</li> 
     <li>this.xuehao = xuehao;</li> 
     <li>this.xiaohonghuageshu = xiaohonghuageshu;</li> 
     <li>}</li> 
     <li><strong><span style="color:#ff0000;"><strong>//核心语句，继承的实现全靠这条语句了：</strong></span></strong></li> 
     <li><strong><span style="color:#ff0000;"><strong>Student.prototype = new People();</strong></span></strong></li> 
     <li></li> 
     <li>Student.prototype.sayHello = function(){ </li> 
     <li>alert("你好我是小学生，我的学号是" + this.xuehao);</li> 
     <li>}</li> 
     <li>Student.prototype.study = function(){ </li> 
     <li>alert("好好学习，天天向上");</li> 
     <li>}</li> 
     <li>Student.prototype.lol = function(){ </li> 
     <li>alert("玩儿英雄联盟啊！");</li> 
     <li>}</li> 
     <li></li> 
     <li>var xiaohong = new Student("小红",11,"女",20160001,4);</li> 
     <li>//xiaohong.lol();</li> 
     <li>//xiaohong.chifan();</li> 
     <li>xiaohong.sayHello();</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

子类可以覆盖父类的一些方法，父类的方法不冲突，因为我们子类追加的方法，追加到了父类的实例上。

这种方法不行：追加子类方法的时候，父类也被改了：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

## **三、对象与属性** ##

### **3.1 in运算符** ###

返回一个布尔值，表示这个属性是不是对象的属性。

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>var obj = { </li> 
     <li>a : 1,</li> 
     <li>b : 2,</li> 
     <li>c : false</li> 
     <li>}</li> 
     <li></li> 
     <li>console.log("a" in obj); //true</li> 
     <li>console.log("b" in obj); //true</li> 
     <li>console.log("c" in obj); //true</li> 
     <li>console.log("d" in obj); //false</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

in不仅仅检测是对象自己有没有这个属性，如果原型链上有这个属性，那么也会返回true。整个原型链如果没有这个属性，就返回false。也就是说，in操作符会进行原型链查找。

for in 这个循环，会把原型链上所有的可枚举的属性列出来：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>for(var k in obj){ </li> 
     <li>console.log(k);</li> 
     <li>}</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

什么是可枚举，系统默认的属性（比如constructor）都是不可枚举的。for in循环能够把自己添加的属性罗列出来，罗列的不仅仅是自己身上的属性，还有原型链上的所有属性。

### **3.2 hasOwnProperty方法** ###

这个方法定义在了Object.prototype对象上面，所以任何一个Object都能够拥有这个方法。

这个方法返回true、false。表示自己是否拥有这个属性，不考虑原型链。就看自己身上有没有这个属性，不进行原型链查找。

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>var obj = { </li> 
     <li>a : 1,</li> 
     <li>b : 2,</li> 
     <li>c : 3</li> 
     <li>}</li> 
     <li>obj.__proto__ = { </li> 
     <li>d : 4</li> 
     <li>}</li> 
    </ol><p></p> 
    <ol> 
     <li>console.log(obj.hasOwnProperty("a")); //t</li> 
     <li>console.log(obj.hasOwnProperty("b")); //t</li> 
     <li>console.log(obj.hasOwnProperty("c")); //t</li> 
     <li>console.log(obj.hasOwnProperty("d")); //f</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

### **3.3 对象直接打点验证某个属性是否存在** ###

对象打点调用属性，我们之前的课程已经讲过，遍历原型链。所以就可以看出来属性是否在自己身上、原型链上。如果在，就返回值；如果不在就返回undefined.

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>var obj = { </li> 
     <li>a : 1,</li> 
     <li>b : 2,</li> 
     <li>c : 3</li> 
     <li>}</li> 
     <li>obj.__proto__ = { </li> 
     <li>d : 4</li> 
     <li>}</li> 
     <li></li> 
     <li>&nbsp; console.log(obj.m); //undefined</li> 
     <li>&nbsp; console.log(obj.a); //1</li> 
     <li>&nbsp; console.log(obj.b); //2</li> 
     <li>&nbsp; console.log(obj.c); //3</li> 
     <li>&nbsp; console.log(obj.d); //4</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

有个误会，比如obj.m值就是undefined，那么obj.m还是返回undefined。不知道m属性存在不存在。

## **四、instanceof运算符** ##

类在英语里面叫做class，实例在英语里面叫做instance。

instaceof运算符：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>A instaceof B</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

验证A对象是不是B类的实例。

比如：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>//类，构造函数</li> 
     <li>function Dog(){ </li> 
     <li></li> 
     <li>}</li> 
     <li>//实例化一个对象</li> 
     <li>var d = new Dog();</li> 
     <li>//验证d是不是Dog的一个实例</li> 
     <li>console.log(d instanceof Dog);</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

![90106e77b8f546d5ae9516e29185a2d0.png][]

这里要注意一个事儿：“HelloKitty是狗”：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>//类，构造函数</li> 
     <li>function Dog(){ </li> 
     <li></li> 
     <li>}</li> 
     <li></li> 
     <li>function Cat(){ </li> 
     <li></li> 
     <li>}</li> 
     <li>Cat.prototype = new Dog(); //继承</li> 
     <li></li> 
     <li>var hellokitty = new Cat(); //通过cat来实例一个</li> 
     <li>console.log(hellokitty.constructor); //Dog</li> 
     <li>console.log(hellokitty instanceof Cat); //true</li> 
     <li>console.log(hellokitty instanceof Dog); //true</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

instanceof 运算符的机理： 遍访hellokitty这个对象的原型链上的每个原型对象，如果遍访到这个原型对象，是某个构造函数的prototype，那么就认为hellokitty是这个构造函数的实例，返回true。

一个数组用typeof检测的时候，返回object

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>var arr = [];</li> 
     <li>console.log(typeof arr);</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

![dd1f7daf2def4e7cae49d5f91bb015bc.png][]

正则表达式也是：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>var obj2 = /ABC/g;</li> 
     <li>console.log(typeof obj2);</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

![3013d9cab895478f873a973435e50060.png][]

用instanceof运算符能够轻松解决数组的识别：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>var arr = [];</li> 
     <li>console.log(<strong><span style="color:#ff0000;"><strong>arr instanceof Array</strong></span></strong>);</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

![4155b069eaa440b3ae07120f41d4d6d3.png][]

ECMAScript5标准中新增了一个API验证数组：

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;width:521.1pt;"> 
    <ol> 
     <li>Array.isArray(arr)</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

![9b2942b2b09042f88bb7f7e3e01f35e0.png][]

IE9开始兼容。

总结一下，A instanceof B， 不能证明A是new B()出来的，因为可能是继承。

角度计算问题

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

Js中角度计算是按照弧度制Π

a能够正常输出100。JS文件（JS包)是不能隔开作用域的。**在JavaScript中，****唯一****能够隔开作用域的就是function**。

JS包里面定义的变量、函数，将在HTML外部失去变量声明的提升、函数声明头的提升。

**本质上，写在不同的<script></script>标签对儿里面的变量、函数，就已经失去变量声明的提升、函数声明头的提升。**

JS的执行顺序，就是引包顺序的先后顺序。

**包不能隔开作用域的**：

**所有的刚性的、事关穿不穿帮、事关安全的，都要写在window.onload里面。**

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1c733d8f29f2415bb49c888441d73d89.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/fc298f354dc3437ca8a897c235924fea.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/2d9cf1697f324e2bb6867ff6fa8ca574.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/c90df2e1e8a94fb8a13651aff1b443bd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/0747194065de4b4aa16e97c2d78bf8c4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/d5d4f45fd7524cc498bbed6b991dfee7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/ddd4bcfe75a04bd48935c0b251cc198b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/8529c6936bd54e62a720499de29cd837.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/7aa526ebb8894efca287e742a48031c3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/2ec7a68521ef4e46976e142abd6a7bbe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/3127cf3b1d2d44b4a02660b1f53a5bcb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[90106e77b8f546d5ae9516e29185a2d0.png]: https://img-blog.csdnimg.cn/90106e77b8f546d5ae9516e29185a2d0.png
[dd1f7daf2def4e7cae49d5f91bb015bc.png]: https://img-blog.csdnimg.cn/dd1f7daf2def4e7cae49d5f91bb015bc.png
[3013d9cab895478f873a973435e50060.png]: https://img-blog.csdnimg.cn/3013d9cab895478f873a973435e50060.png
[4155b069eaa440b3ae07120f41d4d6d3.png]: https://img-blog.csdnimg.cn/4155b069eaa440b3ae07120f41d4d6d3.png
[9b2942b2b09042f88bb7f7e3e01f35e0.png]: https://img-blog.csdnimg.cn/9b2942b2b09042f88bb7f7e3e01f35e0.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/2210705d95e146008cbfb46e5c423ac5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16