创建对象的几种模式以及创建的过程
原型链prototype的理解,以及prototype与 __proto__([[prototype]])的关系
继承的几种实现
1.常见模式与原型链的理解a.构造函数创建
function test() {// }
流程
创建函数的时候会默认为test创建一个prototype属性,test.prototype包含一个指针指向的是object.prototype
prototype默认会有一个constructor,且test.prototype.constructor = test
prototype里的其它方法都是从object继承而来
示例
// 调用构造函数创建实例 var instance = new test()
此处的instance包含了一个指针指向构造函数的原型,(此处的指针在chrome里叫__proto__,也等于[[prototype]])
示例
b.原型模式
由上我们可以知道,默认创建的prototype属性只拥有constructor和继承至object的属性,原型模式就是为prototype添加属性和方法
test.prototype.getname = ()=> { alert('name') }
此时的instance实例就拥有了getname方法,因为实例的指针是指向test.prototype的
instance.__proto__ === test.prototype
如下图所示
897rvf]e5@ix$)`ivj3bosy.png
这里我们可得知:实例instance与构造函数之间是通过原型prototype来相关联的。
c.组合模式
这种模式我们用的最多,其实也是原型模式的另一种写法,只不过有一点小区别而已
function test() {} test.prototype = { getname() { alert('name') } }
我们经常会这么直接重写prototype方法,由上我们可知,prototype会默认自带constructor属性指向构造函数本身,那么重写以后呢?
test.prototype.constructor === object // 而并不等于test了// 因为重写以后相当于利用字面量方式创建一个实例对象,这个实例的构造函数是指向object本身的
当然我们也可以手动赋值constructor
test.prototype = { constructor: test, getname() { alert('name') } }
那么又会有疑问了constructor要不要有何意义?我觉得constructor意义仅仅是为了来鉴别原型所属的构造函数吧。
当需要获取某个属性的时候,会先从实例中查找,没有就根据指针所指向的原型去查找,依次向上,直到实例的指针__proto__指向为null时停止查找,例如:
// 1 读取nameinstance.name // 2 instance.__proto__ === test.prototypetest.prototype.name // 3 test.prototype.__proto__ === object.prototypeobject.prototype.name // 4object.prototype.__proto__ === null
当找到了这个属性就会直接返回,而不会继续查找,即使这个属性值为null,想要继续查找,我们可以通过delete操作符来实现。
由这里我们自然可以想到array, date, function, string,都是一个构造函数,他们的原型的指针都是指向object.prototype,它们就像我这里定义的test一样,只不过是原生自带而已
d.几个有用的方法
object.getprototypeof() 获取某个实例的指针所指向的原型
object.getprototypeof(instance) === test.prototype
hasownproperty 判断一个属性是存在于实例中还是存在于原型中,如图所示:
ny~n}cnr`}8w%4qa$m8lfe4.png
in操作符,无论该属性是否可枚举
'name' in instance // true 'getname' in instance // true
无论属性是在实例中,还是在原型中都返回true,所以当我们需要判断一个属性存在与实例中,还是原型中有2种办法
// 一种就是使用hasownproperty判断在实例中 // 另一种判断在原型中 instance.hasownproperty('getname') === false && 'getname' in instance === true
for ... in操作符也是一样的,但只会列出可枚举的属性,ie8版本的bug是无论该属性是否可枚举,都会列出
d(%s__gn8404{h9x6pw$dvk.png
name是在实例中定义的,getname是在原型中定义的
object.keys()则不一样,它返回一个对象上所有可枚举的属性,仅仅是该实例中的
object.keys(instance)// ["name"]
e.总结
以上讨论了构造函数,原型和实例的关系:
每个构造函数都有原型对象
每个原型对象都有一个constructor指针指向构造函数
每个实例都有一个__proto__指针指向原型
2.继承其实是一个道理,这里我们不难想到,将child.prototype指向parent实例,就是利用原型实现的继承,而为了每个实例都拥有各自的colors和name,也就是基础属性,在child的构造函数中call调用了parent的构造函数,相当于每次实例化的时候都初始化一遍colors和name,而不是所有实例共享原型链中的colors和name。
继承的实质是利用构造函数的原型 = 某个构造函数的实例,以此来形成原型链。例如
// 定义父类function parent() {}parent.prototype.getname = ()=> { console.log('parent') }// 实例化父类let parent = new parent()// 定义子类function child() {} child.prototype = parent // 实例化子类let child = new child() child.getname() // parent// 此时 child.constructor === parent.constructor === parent
a.最经典的继承模式
function parent(name) {this.name = namethis.colors = ['red'] } parent.prototype.getname = function() {console.log(this.name) }// 实例化父类let parent = new parent()function child(age, name) { parent.call(this, name)this.age = age } child.prototype = parent // 实例化子类let child = new child(1, 'aaa') child.getname() // parent
这里会让我想到es6中的class继承
class parent { constructor(name) {this.name = namethis.colors = ['red'] } getname() { console.log(this.name) } }class child extends parent { constructor(age, name) {super(name) } } let child = new child(1, 'aaa') child.getname() // parent
以上就是常见模式与原型链的理解的详细内容。
