原型对象和原型链在前端的工作中虽然不怎么显式的使用到,但是也会隐式的使用了,比如使用的jquery,vue等啦。在进入正题的时候,我们还是需要明白什么是__proto__,prototype等知识点,主要讲解构造函数,这篇博文大多是问答形式进行...
原文请戳这里
问答环节
Javascript创建对象的方式?
也许你会说出工厂模式、构造函数模式、原型模式、组合使用构造函数和原型模式、动态原型模式、寄生构造函数模式和稳妥构造函数这些,但是我们可以对他们进行以下归类--属于函数创建对象。
我们可以简单的将创建对象的方式分为三种:函数创建对象、字面量创建、Object创建。当然,也可以只是分成两类:函数创建对象和字面量创建对象,因为new Object()中的Object是本身就是一个函数。
Object // f Object(){ [native code] }
什么是prototype?
function(注意是function哦)定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别。用伪代码表示如下:
var function{
prototype: prototype{} // function的prototype属性指向prototype对象
}
注意上面说的是function里面才会有prototype属性,而我们new出来的对象里面是没有的哦。
# function
function Fun(name){
this.name = name;
}
Fun.prototype // {constructor:f}
var fun = new Fun('嘉明');
fun.prototype // undefined
# Object
Object.prototype // {constructor:f,__defineGetter__:f,...}
var object = new Object();
object.prototype // undefined
# 字面量,字面量可以理解没有prototype啦
var jack = {};
jack.prototype // undefined
proto是什么?
在官方的es5种,定义了一个名叫做[[prototype]]的属性,每个对象(除了null)都拥有这样一个属性,这个属性是一个指针,它指向一个名叫做原型对象的内存堆。而原型对象也是一个对象,因此又含有自己的[[prototype]]属性,又指向下一个原型对象,终点指向我们的Object.prototype对象。
注意⚠️ 这里使用的是[[prototype]],而并非proto。可是他们是同一个东西哈:[[prototype]]是官方所定义的属性,而proto是浏览器(就是任性)自己对[[prototype]]所做的实现。
分三种情况来说对象内部的__proto__:
- 使用字面量定义一个普通对象: var foo = {}
- 创建一个函数: function Foo(){};
包含Object()啦 - 创建对象实例: var foo = new Foo();
情况一:{}
var foo = {};
foo.__proto__; // {}
foo.__proto__ === Object.prototype; // true
foo.hasOwnProperty('prototype'); // false 函数才有prototype属性
foo.hasOwnProperty('__proto__'); // false
Object.prototype.hasOwnProperty('__proto__'); // true