JS基础知识之原型和原型链

构造函数

基本上只要是大写字母开头的函数就是构造函数

    function Foo(name,age){
        this.name = name;
        this.age = age;
        this.class = 'class one';
        // return this;  默认有这一行
     }

    var f = new Foo('hanmeimei',18); //new 是构造函数形成实例的过程
    var f2 = new Foo('lilei',19);
复制代码

构造函数-扩展

     1、var a = {} 定义空对象，其实是 var a = new Object()的语法糖
     2、var a = [] 其实是 var a = new Array() 的语法糖
     3、function Foo() {...} 其实是var Foo = new Function(...)，例如
        var Sum = new Function('a', 'b', 'return a + b');
     4、使用 instanceof 判断一个函数是否是一个变量的构造函数
     推荐使用前面的书写方式，通俗易懂。
复制代码

原型规则和示例

5个原型规则

• 1、所有的引用类型（数组、对象、函数）都具有对象特性，即可自由扩展属性（除了属性 'null'之外）

        var obj = {};
        obj.a = 100;
        var arr = [];
        arr.a = 100;

        function fn(){}
        fn.a = 100;
复制代码

• 2、所有的引用类型（数组、对象、函数），都有一个_proto_ 属性，属性值是一个普通对象。

        console.log(obj._proto_);
        console.log(arr._proto_);
        console.log(fn._proto_);
复制代码

• 3、所有的函数，都有一个prototype属性，属性值是一个普通对象。

        console.log(fn.prototype)
复制代码

• 4、所有的引用类型（数组、对象、函数），都有一个_proto_ 属性指向它的构造函数的prototype属性值

        console.log(obj._proto_ === Object.prototype)
复制代码

• 5、当试图得到一个对象的属性时，如果这个对象本身没有这个属性，那么会去它的_proto_（即它的构造函数的prototype）中去寻找。

        //构造函数
       function Foo(name,age){
         this.name = name;
       }
       Foo.prototype.alertName = function () {
           alert(this.name)
       }

       //创建示列
       var f = new Foo('lilei');
       f.printName = function () {
           console.log(this.name)
       }

       //测试
       f.printName() //获取f本身的属性，并执行
       f.alertName() //获取f的隐示原型（去对应构造函数的显示原型寻找到了）
复制代码

循环对象自身的属性

       var item;
       for(item in f){
        //高级浏览器已经在 for in 中屏蔽了来自原型的属性
        //但是还是建议加上这个判断，保证诚心的健壮性
        if(f.hasOwnProperty(item)){
            console.log(item)
        }
       }
复制代码

原型链

     //构造函数
       function Foo(name,age){
         this.name = name;
       }
       Foo.prototype.alertName = function () {
           alert(this.name)
       }

       //创建示列
       var f = new Foo('lilei');
       f.printName = function () {
           console.log(this.name)
       }

       //测试
       f.printName() //获取f本身的属性，并执行
       f.alertName() //获取f的隐示原型（去对应构造函数的显示原型寻找到了）
       f.toString()  //f._proto_._proto_ 中查找
复制代码

instanceof 用于判断 引用类型 属于哪个构造函数的方法

• f instanceof Foo 的判断逻辑： f的_proto_一层一层往上，能否找到对应的Foo.prototype

通俗易懂的原型链继承的例子

        //动物
       function Animal(){
           this.eat = function () {
               console.log('animal eat')
           }
       };
       //狗
       function Dog(){
           this.bark = function () {
               console.log('dog bark')
           }
       };

       Dog.prototype = new Animal();
       //声明一个实例 金毛
       var jm = new Dog();
复制代码

转载于:https://juejin.im/post/5cab10d1e51d452b3d4e994e