对象
2018-10-16 本文已影响4人
数据研究bot
原型
为了更好理解原型的概念,先做一个准备工作。
首先创建一个新数组,并为其中一个变量添加属性和方法,该变量可以实现属性和方法的调用。其次创建另一个变量,并调用之前变量的属性和方法,可以发现调用的结果是undefined和报错,那么问题来了,如何才能让arr1也能调出arr的属性和方法呢?这里就涉及到了原型的概念。

-
原型:创建的每一个函数都有一个prototype属性,这个属性是一个指针,可以指向一个对象,这个实例化对象可以共享属性和方法。prototype就是通过调用构造函数而创建的那个对象实例的原型对象。
- 简单的说原型就是函数对象的一个属性,它定义了构造函数制造出对象的公共祖先,通过该构造函数产生的对象,可以继承该原型的属性和方法。
- 原型用途:所有对象实例都可以共享属性和方法。
那么如何在原型上添加属性和方法呢?
Array.prototype.方法/属性=...
也可以通过constructor属性查看创建此对象函数的引用。
详细代码可以参考下方的图片。
创建对象的几种方法
工厂模式创建对象

构造函数创建对象

可以看出,在工厂模式下必须要有返回值,而且并没有解决对象的识别问题,比如在函数内部创建对象时,我们无法判断出创建对象的具体类型,而构造函数模式下,由于是自己构造的,因此我们可以清楚的知道创建对象的类型。
原型模式创建对象

原型模式创建对象可以节约空间,提升性能,将方法以字面量的形式储存在原型中,开发中常用这种方法来解决问题。
这里又引申出一个新问题,this属性如何使用?
- this所在的函数在哪个对象中,this就代表哪个对象:比如图片中的this在Person函数对象中,那么this就代表Person对象,this.names指的即为Person对象中的names属性;
- 谁调用this就是谁:比如下方的例子
function test(){
console.log(this);}
test();//window.test()
由于此时this指向的是window对象,因此实际上是window在调用test。 - 构造函数中的this,始终是new的当前对象;
-
call与apply、bind方法可以改变this的指向,call与apply的区别是传参类型不同,前者传入的实参与形参要相统一,后者传参类型为数组,bind则需要连接在函数表达式后。
继承模式
-
共有原型模式
两个函数的原型指向同一个空间,修改其中一个原型属性,另一个也发生变化,无法实现个性化设置。
-
圣杯模式
改变目标函数的属性,原有函数的属性不会发生改变,可以实现个性化设置。