关于javascript的原型和原型链，看我就够了（一）

关于js的原型和原型链，有人以为这是很头疼的一块知识点，其实否则，它很基础，不信，往下看 要了解原型和原型链，咱们得先从对象提及

建立对象

建立对象的三种方式：

对象直接量

经过对象直接量建立对象,这是最简单也是最经常使用的建立对象的方式

var empty = {};
var pos = {x:12,y:23};
var pos2 = {x:pos.x,y:pos.y+1};
var author={
	"my name":"陌上寒",//属性名带空格，必须用引号包裹
	'article-title':"关于javascript的原型和原型链，看我就够了（一）",//属性名带连字符，必须用引号包裹
	"if":"使用保留字做为属性名，必须用引号包裹"//使用保留字做为属性名，必须用引号包裹
}
复制代码

经过new建立对象

经过new运算符建立并初始化一个新对象，关键字new后跟随一个函数调用，这个函数成为构造函数(constructor)，构造函数用来初始化一个新对象，js包含了一些内置的构造函数

var  obj = new Object()//建立一个空对象等同于 var obj = {}
var  arr = new Array()//建立一个空数组等同于 var arr = []
...
复制代码

上面的Object(),Array(),都是js内置的构造函数 除了内置的构造函数，咱们还可使用自定义构造函数来初始化对象

function fun(){
	console.log("这是一个自定义构造函数")
};
var myObj= new fun();
复制代码

Object.create()

这个建立对象的方法彷佛有些陌生，它建立一个新对象，包含两个参数，

第一个，必需。 要用做原型的对象。 能够为 null 第二个，可选。 包含一个或多个属性描述符的 JavaScript 对象

const obj = Object.create({x:1})//obj 继承了属性x

const obj2 = Object.create(Object.prototype, {
      foo: {
        writable: true,
        configurable: true,
        value: "hello"
      }
    })
    console.log(obj2);//输出{foo: "hello"}
const obj3 = Object.create(null)//obj3不继承任何属性和方法
复制代码

建立一个空对象

//如下三种方法等效
var obj1 = {};
var obj2 = new Object()
var obj3 = Object.create(Object.prototype)
复制代码

今天重点说原型，明天咱们再把Object.create()展开讲述 简单回顾如下，以上就是建立对象的三种方式

• 经过对象直接量
• 经过new建立对象
• 经过Object.create() 立刻进入正题了，还差一点点

对象分类

咱们都知道 JavaScript中万物皆对象，但对象之间也是有区别的。分为函数对象和普通对象。 函数对象能够建立普通对象，(这个咱们上面讲过了),回顾一下

function fun(){
	console.log("这是一个自定义构造函数")
};
var myObj= new fun();
复制代码

普通对象无法建立函数对象，凡是经过new Function建立的对象都是函数对象，其余都是普通对象（一般经过Object建立），能够经过typeof来判断。

function f1(){};
typeof f1 //"function"

var o1 = new f1();
typeof o1 //"object"

var o2 = {};
typeof o2 //"object"
复制代码

关于函数的建立，注意如下写法等价

function f1(){}
等价于
var f1 = new Function();

function f21(a,b){
  alert(a+b);
}
f21(1,2)
等价于
var f22 = new Function('a','b',"alert(a+b)");
f22(1,2)
复制代码

简单回顾一下 咱们将对象分为函数对象和普通对象，函数对象的级别要要高于普通对象，能够经过函数对象建立普通对象，可是没法经过普通对象建立函数对象 好了，进入正题！

何为js原型

每个js对象（null除外）都和另外一个对象相关联，“另外一个”对象就是原型，每个对象都从原型继承属性 全部经过对象直接量建立的对象都具备同一个原型对象，能够经过Object.prototype获取对原型对象的引用,注意如下代码

//dmeo1
const obj =new Object()
//等价于 const obj ={}
//等价于const obj = Object.create()
alert(obj.prototype)//undefined
alert(Object.prototype)//[object Object]
//demo2
function fun(){
	console.log("这是一个自定义构造函数")
};
alert(fun.prototype)//[object Object]
复制代码

看以上代码，obj 为普通对象，obj的prototype为undefined，Object为js内置构造函数，Object存在prototype 咱们得出如下结论 每个函数对象都有一个prototype属性，可是普通对象是没有的； 换个方式再说一遍，只有函数对象才会存在prototype属性，普通的对象不存在 还没结束，看以下代码

function fun(){
	console.log("这是一个自定义构造函数")
};
console.log(fun.prototype)
复制代码

输出：

const obj = {}
console.log(obj.__proto__);
复制代码

输出

const str='陌上寒'
console.log(num.__proto__);
复制代码

输出

constructor

是构造函数建立的实例的属性，该属性的做用是指向建立当前对象的构造函数。（这个不是咱们今天重点要介绍的）

_proto_

这是什么？根据咱们的console.log，不难发现，函数对象，普通对象，都存在__proto__,这是什么呢？__proto__和原型链有什么联系呢？__proto__指向谁呢？

咱们明天继续探讨js原型和原型链，不见不散

原文连接

参考连接

简单理解js的prototype属性

基于js中的原型(全面讲解)

JS原型与原型链的深刻理解

三张图搞懂JavaScript的原型对象与原型链