Javascript原型与原型链

Javascript 笔记

JS 原型与原型链

javascript是基于原型的面向对象的语言，没有类的概念。
_proto_ 实现继承关系
对象名.prototype在原型对象层次优化子对象对公共方法的调用。

• 普通对象与函数对象

  凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。

• 构造函数

  实例的构造函数属性（constructor）指向构造函数。

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

• 原型对象

  原型对象，顾名思义，它就是一个普通对象(但 Function.prototype 除外，它是函数对象，但它很特殊，他没有prototype属性（前面说道函数对象都有prototype属性))。

  在 JavaScript 中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。

  每个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性
  
  Person.prototype = {
  name:  'Zaxlct',
  age: 28,
  job: 'Software Engineer',
  sayName: function() {
    alert(this.name);
  }
  }
  

  原型对象就是 Person.prototype

  在默认情况下，所有的原型对象都会自动获得一个 constructor（构造函数）属性，这个属性（是一个指针）指向 prototype 属性所在的函数（Person）

  原型对象（Person.prototype）是 构造函数（Person）的一个实例。

• __proto__属性

  JS 在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__ 的内置属性，用于指向创建它的构造函数的原型对象。

  所有对象的 __proto__ 都指向其构造器的 prototype

  var obj = {name: 'jack'}
  var arr = [1,2,3]
  var reg = /hello/g
  var date = new Date
  var err = new Error('exception')
   
  console.log(obj.__proto__ === Object.prototype) // true
  console.log(arr.__proto__ === Array.prototype)  // true
  console.log(reg.__proto__ === RegExp.prototype) // true
  console.log(date.__proto__ === Date.prototype)  // true
  console.log(err.__proto__ === Error.prototype)  // true
  
  // 所以如下实例
  var b = new Array();
  b.constructor === Array;
  b.__proto__ === Array.prototype;
  
  var c = new Date(); 
  c.constructor === Date;
  c.__proto__ === Date.prototype;
  
  var d = new Function();
  d.constructor === Function;
  d.__proto__ === Function.prototype;
  
  //个对象都有一个 constructor 属性，可以获取它的构造器，因此以下打印结果也是恒等的：
  function Person(name) {
      this.name = name
  }
  var p = new Person('jack')
  console.log(p.__proto__ === p.constructor.prototype) // true
  

  Object.prototype 对象也有proto属性，但它比较特殊，为 null 。因为 null 处于原型链的顶端，这个只能记住。
  Object.prototype.__proto__ === null

• 函数对象

  所有函数对象的_proto_都指向Function.prototype，它是一个空函数（Empty function）

  Number.__proto__ === Function.prototype  // true
  Number.constructor == Function //true
  
  Boolean.__proto__ === Function.prototype // true
  Boolean.constructor == Function //true
  
  String.__proto__ === Function.prototype  // true
  String.constructor == Function //true
  
  // 所有的构造器都来自于Function.prototype，甚至包括根构造器Object及Function自身
  Object.__proto__ === Function.prototype  // true
  Object.constructor == Function // true
  
  // 所有的构造器都来自于Function.prototype，甚至包括根构造器Object及Function自身
  Function.__proto__ === Function.prototype // true
  Function.constructor == Function //true
  
  Array.__proto__ === Function.prototype   // true
  Array.constructor == Function //true
  
  RegExp.__proto__ === Function.prototype  // true
  RegExp.constructor == Function //true
  
  Error.__proto__ === Function.prototype   // true
  Error.constructor == Function //true
  
  Date.__proto__ === Function.prototype    // true
  Date.constructor == Function //true
  
  //函数对象当然包括自定义的
  // 函数声明
  function Person() {}
  // 函数表达式
  var Perosn = function() {}
  console.log(Person.__proto__ === Function.prototype) // true
  console.log(Man.__proto__ === Function.prototype)    // true
  

  Function.prototype也是唯一一个typeof XXX.prototype为 function的prototype。其它的构造器的prototype都是一个对象

  console.log(typeof Function.prototype) // function
  console.log(typeof Object.prototype)   // object
  console.log(typeof Number.prototype)   // object
  console.log(typeof Boolean.prototype)  // object
  console.log(typeof String.prototype)   // object
  console.log(typeof Array.prototype)    // object
  console.log(typeof RegExp.prototype)   // object
  console.log(typeof Error.prototype)    // object
  console.log(typeof Date.prototype)     // object
  console.log(typeof Object.prototype)   // object
  

  相信都听说过JavaScript中函数也是一等公民，那从哪能体现呢？如下
  console.log(Function.prototype.__proto__ === Object.prototype) // true

  这说明所有的构造器也都是一个普通 JS 对象，可以给构造器添加/删除属性等。同时它也继承了Object.prototype上的所有方法：toString、valueOf、hasOwnProperty等。

  最后Object.prototype的__proto__是谁？
  Object.prototype.__proto__ === null // true

• Prototype

  在 ECMAScript 核心所定义的全部属性中，最耐人寻味的就要数 prototype 属性了。对于 ECMAScript 中的引用类型而言，prototype 是保存着它们所有实例方法的真正所在。换句话所说，诸如 toString()和 valuseOf() 等方法实际上都保存在 prototype 名下，只不过是通过各自对象的实例访问罢了。

  对象可以用 constructor/toString()/valueOf() 等方法;
  数组可以用 map()/filter()/reducer() 等方法；
  数字可用用 parseInt()/parseFloat()等方法；
  w

• 原型链

  function Person(){}
  var person1 = new Person();
  console.log(person1.__proto__ === Person.prototype); // true
  console.log(Person.prototype.__proto__ === Object.prototype) //true
  console.log(Object.prototype.__proto__) //null
  
  Person.__proto__ == Function.prototype; //true
  console.log(Function.prototype)// function(){} (空函数)
  
  var num = new Array()
  console.log(num.__proto__ == Array.prototype) // true
  console.log( Array.prototype.__proto__ == Object.prototype) // true
  console.log(Array.prototype) // [] (空数组)
  console.log(Object.prototype.__proto__) //null
  
  console.log(Array.__proto__ == Function.prototype)// true
  

• 总结

  • 原型和原型链是JS实现继承的一种模型。

• 原型链的形成是真正是靠__proto__ 而非prototype

  • 以上来自： https://www.jianshu.com/p/dee9f8b14771

事件模型

• 事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

百度百科