JS学习笔记04：JS对象、函数、方法、原型

JS对象

JS对象分类：

1、内建对象

2、宿主对象

3、自定义对象

（截图自https://www.bilibili.com/video/av34087791/?p=46）

创建自定义对象实例：

var obj = new Object();//创建对象

obj.name ="孙悟空";//添加一个属性并赋值

console.log(obj.xxx);//如果读取一个不存在的属性，会返回undefined

delete obj.name;//删除指定属性

关于对象属性名：（对象属性的两种使用方式.和[]）

关于属性值：

in运算符：检查对象中是否有指定属性，有返回true，无则返回false

语法："属性名" in 对象;

基本数据类型和引用数据类型

对象属于引用类型，如下图obj2和obj两个变量指向同一对象。所以修改obj的属性，obj2的属性也会修改。因为obj和obj2是同一个对象。

另一种方式，直接创建对象：

属性名可以加引号也可以不加。如果属性名要使用特殊的名字，则必须加引号。

JS函数对象

再看个例子：

var sum = new Function('a', 'b', 'return a + b');

console.log(sum(2, 6));

函数对象除了可以封装代码之外，同其他对象没有不同，也可以添加属性。

• 函数声明

常用方式：不过我们一般使用函数声明的方式来创建函数。

还有一种方式，使用匿名函数创建函数。然后赋值给1个函数对象。通过该函数对象调用函数。

注意：函数调用时，解析器不会检查实参的类型。如果有可能，需要对实参进行类型检查。

调用函数时，解析器也不会检查实参的数量。因此实参数量和形参数量有可能不一致。

函数返回值：

return 语句会终止函数的执行并返回函数的值。如果忽略，将返回 undefined

关于函数实参：

★注意：函数实参不光是简单数据类型，也可以是对象，也可以是函数（对象）。

如上图， fun函数被调用时，函数的实参是一个匿名函数function(){alert("hello")}

将函数作为另一个函数的实参是常用的开发方法。

请注意：

假设一个函数叫xxx() （如果想把它作为实参传递给fun函数的话...）

第一种写法：fun(xxx);   - 是把xxx()函数对象作为fun函数的实参。即函数xxx给函数fun做实参。

而

第二种写法：fun(xxx());  - 是把xxx()函数被调用后的返回值作为实参传给fun函数。这种写法实参传递的不是xxx()函数对象本身！请注意二者的区别,不要写错。

函数返回值可以是对象，也可以是函数

例如：

如上图，a是fun4函数。直接写a();即调用fun4函数。写成fun3()()也是调用fun4函数。【fun3()调用后直接返回fun4，所以fun3()()即fun4()】

立即执行函数

注意：立即执行函数直接调用一次。注意写法。

上图为带参数的立即执行函数。

 

方法

对象的属性可以是任何数据类型，也可以是函数

如上图，对象的属性也可以是函数（对象），调用这个属性（函数），叫做调用对象的方法。

一个对象的属性是函数，那么我们称这个函数是这个对象的方法。

 

上图是方法的另一种写法。请看，obj2也顺利的调用了本身的sayName()方法。

 

枚举对象的属性

如上图，使用 for...in循环将obj里所有的属性都枚举出来了。

作用域

• 全局作用域

在全局作用域中声明的变量，会作为window对象的属性。

在全局作用域中声明的函数，会作为window对象的方法。

变量声明提前

如上图，使用var关键字声明a，相当于在首部提前声明var a；（注意仅将声明提前到首部，并没有将赋值提前）因此执行到console.log(“a=” + a);时控制台输出a=undefined。（a变量存在但此时并没有赋值）

注意：使用var声明变量并赋值等于增加一个变量，而不带var的变量赋值相当于给当前作用域的对象增加一个属性（如果当前作用域没有对象，则成为window对象的全局属性）。两者区别在于变量不可删除，属性可以删除。另外有的JS标准有“严格模式”。在严格模式中必须用var声明变量，省略var关键字将会抛出异常。

函数声明写在哪里都可以，因为浏览器会自动放代码首部创建。但使用函数表达式创建的不行。

• 函数作用域

函数的作用域仅在函数本身（内部）。

在函数内部中可以访问全局变量。在全局中无法访问函数的内部数据。

注意：如果在函数内部有个变量和全局变量同名，那么在函数内访问该变量时，此时访问的变量是函数内部的变量而不是同名的全局变量。

注意：切记！

函数中不使用var声明的新变量，都会成为全局变量！例如：

<script type="text/javascript">
		function test()
		{
		    var a=10;//函数的局部变量。
		    c=99;//注意没有使用var声明的新变量，就会成为全局变量！！！
		}

		test();//调用函数

		console.log(c);//c是全局变量，因此正确输出c=99
		console.log (a);//错误！a是test函数的内部变量，无法在全局中访问。因此此处错误
</script>

• this：指代当前对象

如果没有当前对象，那么当前对象就是全局对象window。

如上图，当前函数中的this指向上下文对象window。

this会指向不同的对象，如下图：

*其实函数就是window的方法，因此当你调用函数时，等于调用window的该方法。因此this是调用该方法的对象即window。

在不同的对象中this代表不同的当前对象。例如：（在猪八戒对象中，this就是猪八戒对象；在孙悟空对象中，this就是孙悟空对象）

function funShowName()
{
	console.log(this.name);
}

var pig=new Object();
pig.name="猪八戒";
pig.showName=funShowName;
pig.showName();//显示猪八戒

var monkey=new Object();
monkey.name="孙悟空";
monkey.showName=funShowName;
monkey.showName();//显示孙悟空

• 使用工厂方法创建对象（不推荐使用）

如图，可以使用工厂方法大批量创造相同性质的对象。

如上图，创建工厂方法之后，用该方法大量创建相同性质的对象。

工厂方法的缺点：使用工厂方法创建的对象类型都是object。我们无法人为的区别不同的对象类型。例如不管创建的对象类型是人类，猫类，还是狗类，它们的对象类型都是相同的即object。

因此我们一般不使用工厂方法创造对象。此处只为了解一下。

• 类：使用构造函数创建对象（推荐使用）

例如：下图使用构造函数Person制造Person类型的对象并赋值。

判断对象为某类的实例：使用instanceof

注意：object对象是所有对象的始祖对象，任何对象都是object对象的实例。如下图：

关于this情况复习总结：如下图

• 使用上文构造函数创建对象的一个缺陷：（重复创造相同的方法）如下图

解决方法：将方法指向的函数从构造函数内部移出到全局即可（这样通过构造函数创建的对象将共享同一方法）。见下图：

内存浪费的问题解决了，但同时产生了新的问题：如下所示

原型对象

原型prototype

注意：mc实例和构造函数MyClass的原型属性是一样的

★向构造函数的原型对象里添加一个属性，那么通过该构造函数创建的对象实例都可以访问到该属性。如下图：

（向原型对象里添加了1个属性a=123。现在所有通过该构造函数创建的对象实例都可以访问到a）

学习了原型对象，那么我们现在把方法写到原型对象中，稳了。

• 使用构造函数创建方法的正确方式（推荐）

将类的方法写到原型对象中。所有通过该类创造的对象实例都可以访问该方法。

现在通过该类创造的实例对象都可以调用sayHello方法了。

总结：

• 检查属性是否存在

原型对象的原型(╥╯^╰╥)

抽丝剥茧，终于在原型对象的原型对象中找到了hasOwnProperty属性。。。。

对原型对象的原型的总结：（到此为止打住！）

• 对象的toString方法

toString是object里定义的方法。我们可以重写自己的toString方法。接下来我们修改类的原型对象里的toString方法，以便让该类所有对象实例都拥有新的toString方法。

接下来输入console.log在控制台看看新效果，如下图：

console.log(per);

console.log(per2);

• 垃圾回收

当创建的对象没有任何变量引用它时，JS垃圾回收机制将销毁它。对象被自动删除。

用户无需手工删除也不能手工删除它。一切由JS垃圾回收机制自动操作。