原型

[Joyeuxman]

对象的三大特性

• 继承
• 多态
• 原型

创建对象的几种方法

对象的分类

对象分为普通对象object和函数对象function。凡是通过new Function()创建的对象都是函数对象，其余都是普通对象。以下示例中f1，f2，Function，Object，归根结底都是通过new Function()的方式进行创建的。

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();
var o4 = new Array();

function f1(){}; 
var f2 = function(){};
var f3 = new Function('str','console.log(str)');

console.log(typeof Object); //function 
console.log(typeof Function); //function  

console.log(typeof f1); //function 
console.log(typeof f2); //function 
console.log(typeof f3); //function   

console.log(typeof o1); //object 
console.log(typeof o2); //object 
console.log(typeof o3); //object
console.log(typeof o4); //object 

构造函数、实例

//Person为构造函数
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function() { alert(this.name) } 
}

//person1、person2为实例 
//实例 = new + 构造函数
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');

console.log(person1.constructor === Person); //true
console.log(person2.constructor === Person); //true

结论： 实例.constructor = 构造函数

原型对象prototype

在JS中定义对象（函数对象或者普通对象）时，对象中都会包含一些预先定义好的属性。其中每个函数对象都有一个prototype属性，该属性是一个普通对象，指向函数的原型对象。原型对象中也会有个预先定义好的属性constructor，该属性（是一个指针）指向prototype属性所在的函数。

结论：
构造函数.prototype.constructor === 构造函数
构造函数.prototype === 构造函数.原型对象 === 一个特殊实例
通俗来讲，原型对象是构造函数的一个实例。

特殊情况(前面说的函数对象都有prototype属性)

Function.prototype是一个函数对象，它没有原型对象。

console.log(typeof Function.prototype)      //function
console.log(typeof Function.prototype.prototype) //undefined

隐式原型__proto__

JS在创建对象（不管是普通对象还是函数对象）的时候，都会有__proto__的内置属性，用于指向创建它的构造函数的原型对象。 请参考下图：

结论：A.__proto__ === A.constructor.prototype

可以表现为：

• 实例.__proto__ === 构造函数.prototype
  

  实例.constructor = 构造函数

• 函数对象.__proto__ === Function.prototype

  //Function.prototype是一个空函数（Empty function）
  //所有构造函数都继承了Function.prototype的属性及方法。如call、apply、bind
  //自定义的函数对象和以下JS内置对象的构造函数都为Function
  Person/Number/Boolean/String/Array/RegExp/Error/Date/Object.constructor === Function
  Function.constructor === Function //此处为坑,码友莫入！
  Function.prototype === Function.constructor.prototype

实践环节

问题

1. person1.__proto__ 是什么？
2. Person.__proto__是什么？
3. Person.prototype.__proto__是什么？
4. Object.__proto__ 是什么？
5. Object.prototype__proto__ 是什么？
6. Function.prototype.__proto__是什么？

答案：

1. person1.__proto__ === Person.prototype
2. Person.__proto__ === Function.prototype
3. Person.prototype.__proto__ === Object.prototype
4. Object.__proto__ === Function.prototype
5. Object.prototype.__proto__ === null此处为坑，码友莫入！ 由此可见null处于原型链的顶端。
6. Function.prototype.__proto__ === Object.prototype

疑问解答：

• Function.prototype为什么是函数对象???

  var A = new Function(); 
  Function.prototype = A;
  //结合起来就是： 
  // Function.prototype === A === new Function() === 空函数(empty function)
  /由于其由 new Function()创建，所以为函数对象。

• Object.__proto__ === Function.prototype // true

  Object 是函数对象，是通过new Function()创建的，所以Object.__proto__指向Function.prototype。

• Function.__proto__ === Function.prototype // true

  Function 也是函数对象，也是通过new Function()创建，所以Function.__proto__指向Function.prototype。

• Function.prototype.__proto__ === Object.prototype //true

其实这一点我也有点困惑，不过也可以试着解释一下。
Function.prototype是个函数对象，理论上他的__proto__应该指向 Function.prototype，就是他自己，自己指向自己，没有意义。
JS一直强调万物皆对象，函数对象也是对象，给他认个祖宗，指向Object.prototype。Object.prototype.__proto__ === null，保证原型链能够正常结束。

总结：

• 原型和原型链是JS实现继承的一种模型。
• 原型链的形成是真正是靠proto 而非prototype

[Joyeuxman]

![Uploading 原型详解.png…]() ![Uploading proto.png…]()

[Joyeuxman]

https://www.zhihu.com/question/34183746/answer/58068402 https://www.jianshu.com/p/652991a67186

[Joyeuxman]

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

文中指出： 如果层叠上下文元素不依赖z-index数值，则其层叠顺序是z-index:auto可看成z:index:0级别。 在 display:flex|inline-flex与层叠上下文 的例子中，设置display:flex使flex项目成为层叠上下文元素，而该项目本身已经有z-index,并生效值为1，不是auto或者0。我觉得你的结论不够严谨。

还有该flex项目上有两个属性，分别是background-color: blue; z-index: 1; 位于该项目下的img也是层叠上下文元素，其z-index:-1;依据层叠顺序图决定显示顺序时，为什么不拿项目的z-index的值和img的z-index的值进行比较决定显示顺序？ 而是用background-color来和img的z-index来比较从而决定显示顺序? 这点不明白，烦请作者解释一下。谢谢