Prototype and inheritance (finished)

Prototype and inheritance (finished)

/**
 *    
    typeof   null   Object  
  Function   Object  
  new  
  prototype  __proto__ 
  ES5  
  ES6  
  ES6 extends  
1.  
   
     ' '
  *function Foo  JavaScript Array String 
  *function Object  Object
  *function Function   Function
  * function   .__proto__  Function.prototype
  * ,String Array Number Function Object  function
   
  1.1  
 //function Obj(props = {}) {
 //  this.name = props.name
 //  this.age = props.age
 //}
 //const obj2 = new Obj({name: 'jj'})
 //const obj1 = {}
 //obj2.__proto__
 //obj1.__proto__
   
   JavaScript JavaScript    JavaScript Object  Function  
   
  function fun1() {}
  const fun2 = function() {}
  const fun3 = new Function('name', 'console.log(name)')

  const obj1 = {}
  const obj2 = new Object()
  const obj3 = new fun1()
  const obj4 = new new Function()

  console.log(typeof Object)//function
  console.log(typeof Function)//function
  console.log(typeof fun1)//function
  console.log(typeof fun2)//function
  console.log(typeof fun3)//function

  console.log(typeof obj1)//object
  console.log(typeof obj2)//object
  console.log(typeof obj3)//object
  console.log(typeof obj4)//object
   obj1 obj2 obj3 obj4   fun1 fun2 fun3  Function  
   Function Function 
  JavaScript 
    Function   new Function  
  Function.__proto__ === Function.prototype//true

  1.2 __proto__
      __proto__   constructor   prototype  
     JavaScript __proto__   constructor 
    function Person() {}
    let renzhen = new Person()
     : 'Object   Function '
     __proto__    
    ECMAscript  prototype __proto__   obj.__proto__  prototype
     ECMAscript prototype  
    * Object.getPrototypeOf(obj)     prototype  
    *  Object.setPrototypeOf(obj, anthoerObj)    prototype  
    *   __proto__   obj.__proto__    obj.__proto__ = antherObj  
    * ECMAscript2015    __proto__  

     a  __proto__ 
    __proto__  for in     Object.keys(obj)  
      obj.__proto__   Object.prototype   __proto__  get/set 
    Object.defineProperty(Object.prototype, '__proto', {
      get() {
        console.log('get')
      }
    })
    ({}).__proto__
    cosnole.log((new Object()).__proto__)//get  get
     __proto    JavaScript   
     __proto__   __proto__  __proto__ __proto__   null  

  1.3 prototype
    object that provids shared properties for other objects
     prototype     prototype 
      prototype  
      'prototype' 
      __proto__   prototype  prototype         renzhen.__proto__ === Person.prototype  prototype  

  1.4 constructor
    constructor  
     constructor prototype   JavaScript     prototype .__proto__ ====  prototype
     .prototype.constructor ===    constructor    __proto__  constructor   
     JavaScript   Function     Function.prototype ===  Function.__proto__
       constructor
      ' constructor '
      constructor   constructor  
    __proto__ 
      ' constructor '
  

2. typeof && instanceof  
  2.1 typeof  
    MDN  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof
    2.1.1  
    typeof    typeof  string boolean number function undefined symbol object  object  object object
    let s = new String('ab')
    typeof s === 'object'//true
    typeof null//object
    2.1.2  
    typeof null  object  js js bug
     JavaScript  JavaScript    0 null  null  0 typeof null  object   typeof null === null 
    js  1-3  
    **1   
    **110  
    **100  
    **010  
    **000  
     undefined  null   
    null  0
    undefined  -2^30 
     typeof  typeof    null  

  2.2 instanceof  
    istanceof  typof    instanceof   constructor.prototype   object    typeof  instanceof     
    function C() {}
    function D() {}
    
    var o = new C()
    o.instanceof C//true   Object.getPrototypeOf(o) === C.prototype
    o instanceof D;//false  D.prototype   o  
    o instanceof Object//true   Object.prototype.isPrototypeOf(o)  true
    C.prototype instanceof Object//true 

    C.prototype = {}
    var o2 = new C()
    o2 instanceof C//true
    o instanceof C//false  C.prototype    o 

    D.prototype = new C()// 
    var o3 = new D()
    o3 instanceof D//true
    o3 instanceof C;//true   C.prototype   o3  
    
    instanceof  
        instanceof
      ' '
          JavaScript   
      function instance_of(L, R) {
        var O = R.prototype// R 
        L = L.__proto__// L 
        while(true) {
          if (L === null) {
            return false
          }
          if(O === L) {// O   L  
            return true
            L = L.__proto__
          }
        }
      }
           Object   Function  instanceof  true
      ** Object instanceof Object
     // 
      ObjectL = Object, ObjectR = Object
     // 
      O = ObjectR.prototype = Object.prototype
      L = ObjectL.__proto__ = Function.prototype
     // 
      O  = L
     //  L  __proto__
      L = function.prototype.__proto__ = Object.prototype
     // 
      O == L
     // true

      **Function instanceof Function
     // 
      FunctionL = Function, FunctionR = Function
     // 
      O = FunctioinR.prototype = Function.prototype
      L = FunctionL__proto__ = Function.prototype
     // 
      O == L
     // true

      Foo instanceof Foo
     // 
      FooL = Foo, FooR = Foo; 
     // 
      O = FooR.prototype = Foo.prototype 
      L = FooL.__proto__ = Function.prototype 
     // 
      O != L 
     //  L   __proto__ 
      L = Function.prototype.__proto__ = Object.prototype 
     // 
      O != L 
     //  L   __proto__ 
      L = Object.prototype.__proto__ = null 
     // 
      L == null 
     //  false


3.ES5  
  3.1 new  
   new  
  function Person(name, age) {
    this.name = name
    this.age = age
    this.sex = 'male'
  }
  Person.prototype.inHandsome =  true
  Person.prototype.sayName = function() {
    console.log(`Hello, my name is ${this.name}`)
  }
  let handsomeBoy = new Person('renzhen', 24)
  console.log(handsomeBoy.name)//renzhen
  console.log(handsomeBoy.sex)//male
  cosole.log(handsomeBoy.isHandsome)//true
  handsomeBoy.sayName()//Hello my name is renzhen
   
    *  Person  
    *  Person.prototype  
    3.1.1 new  
    function objectFactory() {
      const obj = new Object()// Object.prototype  
      Constructor = [].shift.call(arguments)// 
      const F = function() {}
      F.prototype = Constructor.prototype
      obj = new F()// 
      Constructor.apply(obj, arguments)// obj 
      return obj// obj
    }
    ** new Object()   obj
    **  shift arguments  
    **  obj  obj 
    **   apply   this  obj 
    **  obj

     
    function Person(name,age){
      this.name = name;
      this.age = age;
      this.sex = 'male';
    }
    Person.prototype.isHandsome = true;
    Person.prototype.sayName = function(){
      console.log(`Hello , my name is ${this.name}`);
    }

    function objectFactory() {
      const obj = new Object()
      Constructor = [].shift.call(arguments)
      const F = function(){}
      F.prototype = Contructor.prototype
      obj = new F()
      Constructor.apply(obj, arguments)
      return obj
    }

    let handsomeBoy = objectFactory(Person,'Nealyang',25);
    console.log(handsomeBoy.name)//Nealyang
    console.log(handsomeBoy.sex)//male
    console.log(handsomeBoy.isHandsome)//true
    handsomeBoy.sayName();//Hello , my name is Nealyang
   //  obj  __proto__ 

    3.1.2 new  
     
     
    function objectFactory() {
      var obj = new Object()
      Constructor = [].shift.call(arguments)
      var F = function() {}
      F.prototype = Constructor.prototype
      obj = new F()
      var set = Constructor.apply(obj, arguments)
      return typeof ret === 'object' ? ret : obj
    }
  3.2  
    function SuperClass() {
      this.superValue = true
    }
    SuperClass.prototype.getSuerValue = function() {
      return this.superValue
    }
    function SubClass() {
      this.subValue = false
    }
    SubClass.prototype = new SuperClass()
    SubClass.prototype.getSubValue = function() {
      return this.subValue
    }
    var instance = new SubClass()
    console.log(instance instanceof SuperClass)//true
    console.log(instance instanceof SubClass)//true
    console.log(SubClass instanceof SuperClass)//false
      instanceof   console   true  console.log(SubClass.prototype instanceof SuperClass)
     
    **  prototype 
    **    prototype  

  3.3  
    function SuperClass(id) {
      this.books = ['js', 'css']
      this.id = id
    }
    SuperClass.prototype.showBooks = function() {
      console.log(this.books)
    }
    function SubClass(id) {
      SuperClass.call(this, id)
    }
    var instance1 = new SubClass(10)
    var instance2 = new SubClass(11)

    instance1.books.push('html')
    console.log(instanc1)
    console.log(instance2)
    instance1.showBooks()//TypeError

    SuperClass.call(this, id) this   prototype       

  3.4  
    function SuperClass(name) {
      this.name = name 
      this.books = ['js', 'css']
    }
    SuperClass.prototype.getBooks = function() {
      console.log(this.books)
    }
    function SubClass(name, time) {
      SuperClass.call(this, name)
      this.time = time
    }
    SubClass.prototype = new SuperClass()
    SubClass.prototype.getTime = function() {
      console.log(this.time)
    }
     SuperClass  

  3.5  
    function inheritObject(o) {
      function F() {}
      F.prototype = o
     // 
      return new F()
    }
     new  
     
    var book = {
      name: 'js book',
      likeBook: ['js', 'css']
    }
    var newBook = inheritObject(book)
    newBook.name = 'renzhenbook'
    newBook.liekBook.push('vue')
    var otherBook = inheritObject(book)
    otherBook.name = 'react'
    otherBook.likeBook.puhs('nodebook')
    console.log(newBook, otherBook)
       

  3.6  
    var book = {
      name: 'js book',
      liekBook: ['html', 'css']
    }
    function createBook(obj) {
     // 
      var o = new inheritObject(obj)
     // 
      0.getName = function(name) {
        consoel.log(name)
      }
      return o;
    }
     

  3.7  

4. ES6  
    ES6   class  
   
   ' '
  function _instanceof(left, right) {
    if(
      right !== null &&
      typeof Symbol !== 'undefined' &&
      right[Symbol.hasInstance]
    ) {
      return !!right[Symbol.hasInstance](left)
    } else {
      return left instanceof right
    }
  }
  function _classCallCheck(instance, Contructor) {
    if(!_instanceof(instance, Contructor)) {
      throw new TypeError('Cannot call a class as a function')
    }
  }
  var Person = function Person(name) {
    _classCallCheck(this, Person)
    this.name = name
  }
  _instanceof  _classCallCheck Person new   ES5 function  this window   throw Error

   
  function _instanceof(left, right) {

  }
  function _classCallCheck(instance, Constructor) {

  }
  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      })
    } else {
      obj[key] = value
    }
    return obj
  }
  var Person = function Person(name) {
    _classCallCheck(this, Person)
    _defineProperty(this, 'shili', ' ')
    this.name = name
  }
  _defineProperty(Person, 'jingtai', ' ')

   
  function _instanceof(left, right) {}
  functioin _classCallCheck(instance, Contructor) {}
  function _defineProperty(obj, key, value) {}
  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i]
      descriptor.enmuerable = descriptor.enmuerable || false
      descriptor.configuable = true
      if("value" in descirptor) descriptor.writable = true
      Object.defineProperty(target, decriptor.key, descriptor)
    }
  }
  function _createClass(Constructor, protoProps, staticProps) {
    if(protoProps) _defineProperties(Constructor.prototype, protoProps)
    if (staticProps) _definePropperties(Constructor, staticProps)
    return Contructor
  }
  var Person = {
    function() {
      function Person(name) {
        _classCallCheck(this, Person)
        _defineProperty(this, 'shili', ' ')
        this.name = name
      }
      _createClass(Person, [{
        key: 'sayName',
        value: function sayName() {
          return this.name
        }
      }, {
        key: 'name',
        get:function get() {
          return 'renzhen'
        },
        set: function set(newName) {
          console.log('new name is' + newName)
        }
      }], [{
        key: 'eat',
        value: function eat() {
          return ' eat food'
        }
      }])
      return Person
    }()
  }
   _createClass _defineProperties  
   _createClass  
    _defineProperties  _defineProperty  , enumerable  false  configurable true
    es6 class 

  5. extend  
    ' '
  function _instanceof(left, right) {...}
  function _classCallCheck(instance, Constructor) {...}
  var Parent = function Parent(name) {...}
  function _typeof(obj) {
    if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
      _typeof = function _typeof(obj) {
        return typeof obj
      }
    } else {
      _typeof = function _typeof(obj) {
        return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj
      }
    }
    return _typeof(obj)
  }

  function _possibleConstructorReturn(self, call) {
    if(call && (_typeof(call) === 'object' || typeof call === 'function)) {
      return call
    }
    return _assertThisInitialized(self)
  }

  function _assertThisInitialized(self) {
    if (self === void 0) {
      throw new ReferenceError("this hasn not been initialised - super() has not been called ")
      return self
    }
  }

  function _getPrototypeOf(o) {
    
  }

    _inherits
    _possibleConstructorReturn
5.  

 */