原型链

原型链

1. 如何准确判断一个变量是数组类型

   var arr = [];
   arr instanceof Array; //true
   typedof arr //object  , typeof无法判断是否是数组
   

2. 写一个原型链继承的例子

   //动物
   function Animal() {
     this.eat = function() {
       console.log('animal eat')
     }
   }
   //狗
   function Dog() {
     this.bark = function() {
       console.log('dog bark')
     }
   }
   Dog.prototype = new Animal()
   //哈士奇
   var hashiqi = new Dog()
   

   function Elem(id) {
     this.elem = document.getElementById(id)
   }
   
   Elem.prototype.html = function(val) {
     var elem = this.elem
     if (val) {
       elem.innerHTML = val
       return this //return后可以执行链式操作
     } else {
       return elem.innerHTML
     }
   }
   
   Elem.prototype.on = function(type, fn) {
     var elem = this.elem
     elem.addEventListener(type, fn)
     return this
   }
   
   var div1 = new Elem('id')
   //console.log(div1.html());
   div1
     .html('<p>hello zhupan</p>')
     .on('click', function() {
       alert('clicked')
     })
     .html('<p>javascript</p>')
   

3. 描述 new 一个对象的过程

   //创建一个新对象
   //this指向这个新对象
   //执行代码,即对this复制
   //返回this
   function Foo(name, age) {
     this.name = name
     this.age = age
     this.class = 'class - 1'
     //return this; //默认有这一行
   }
   var f = new Foo('zhangsan', 20)
   //var f1 = new Foo('lisi',22); //创建多个对象
   

知识点

1. 构造函数

   function Foo(name, age) {
     this.name = name
     this.age = age
     this.class = 'class - 1'
     //return this; //默认有这一行
   }
   var f = new Foo('zhangsan', 20)
   //var f1 = new F00('lisi',22); //创建多个对象
   

2. 构造函数-扩展

   var a = {}; //其实是var a = new Object();的语法糖
   var a = []; //其实是Var a = new Array();的语法糖
   function Foo(){...}; //其实是var Foo = new Funtion(...)
   //使用istanceof判断一个函数是否是一个变量的构造函数
   

3. 原型规则和示例

   • 所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性(除了null以外)

     var obj = {}
     obj.a = 100
     var arr = []
     arr.b = 100
     function fn() {}
     fn.a = 100
     

   • 所有的引用类型(数组、对象、函数),都有一个隐式原型proto属性,属性值是一个普通的对象

     console.log(obj.__proto__)
     console.log(arr.__proto__)
     console.log(fn.__proto__)
     

   • 所有的引用类型(数组、对象、函数),其隐式原型proto属性值指向它的构造函数的显式原型 prototype 属性值

     console.log(obj.__proto__ === Object.prototype)
     

   • 所有的函数,都有一个显式原型 prototype 属性,属性值也是一个普通的对象

     console.log(fn.prototype)
     

   • 当试图得到一个对象的某个属性时,但这个对象本身没有这个属性,那么会去它的proto(即它的构造函数的 prototype)中寻找

     function Foo(name, age) {
       this.name = name
     }
     Foo.prototype.alertName = function() {
       alert(this.name)
     }
     //创建示例
     var f = new Foo('zhangsan')
     f.printName = function() {
       console.log(this.name)
     }
     //测试
     f.printName()
     f.alertName()
     f.toString() //要去f.__proto__.__proto__中查找
     

4. instacce of

   • 用于判断引用类型属于哪个构造函数的方法
   • f instance Foo 的判断逻辑是：f 的proto一层一层往上,能否对应到 Foo.prototype,再试着判断 f instanceof Object