JavaScript原型

<!doctype html>
<html lang='en'>
<head>
    <title>原型</title>
    <script>
    window.onload = function(){
        //JS 一切皆对象?二大类    原始值 + 对象
        //对象有区别   函数对象和普通对象
        //函数对象是通过new Function
        function f() {};
        typeof f;
        //"function"
        //普通对象
        var o = {};
        typeof o;
        //"object"
        //实例属于普通对象
        function f() {};
        var f1 = new f();
        typeof f1;
        //"object"

        function Person(){}   //空的函数对象
        Person.prototype.name = 'sonia';
        Person.prototype.age = 'sonia';
        var person1 = new Person();
        var person2 = new Person();
        person1.name;


        var cat1 = {};//创建一个空对象
        cat1.name="大明";
        cat1.color ="黄色";
        var cat2 = {};//创建一个空对象
        cat2.name="小明";
        cat2.color ="白色";

        function cat(name,color){   //普通函数
            return {
                name:name,
                color:color
            }
        };
        var cat1 = cat("大明","黄色");
        var cat2 = cat("小明","白色");
        cat1.name//

        function Cat(name,color){   //构造函数
            this.name = name;
            this.color = color;
        };
        var cat1 = new Cat("大明","黄色");
        var cat2 = new Cat("小明","白色");
        //cat1.name

        function Cat(name,color){   //构造函数
            this.name = name;
            this.color = color;
            this.type='动物';
            this.eat = function(){console.log("吃老鼠")};
        };
        var cat1 = new Cat("大明","黄色");
        var cat2 = new Cat("小明","白色");

        //prototype 
        function Cat(name,color){   //构造函数
            this.name = name;
            this.color = color;
            //this.type='动物';
           // this.eat = function(){console.log("吃老鼠")};
        };
        Cat.prototype.type='动物';
        Cat.prototype.eat = function(){console.log("吃老鼠")};
        var cat1 = new Cat("大明","黄色");
        var cat2 = new Cat("小明","白色");

        //prototype 验证
        //in  不管自身属性还是原型属性都返回true
        console.log('name' in cat1);  //true
        console.log('type' in cat1);  //true
        //hasOwnProperty 自身的属性为true 原型属性为false
        console.log(cat1.hasOwnProperty('name'));  //true
        console.log(cat1.hasOwnProperty('type'));  //fale


        //构造函数的继承
        function Animal(){   //动物对象   父
            this.type = '动物'
        };
        // function Cat(name,color){   //猫对象   子
        //     this.name = name;
        //     this.color = color;
        // };

        //apply()   call()  在一个对象中调用另一个对象 apply(this,参数)
        //区别参数不同   apply 传数组  call 一个个传
        function Cat(name,color){   //猫对象
            Animal.apply(this);   //将父对象的构造函数绑定在子对象上
            this.name = name;
            this.color = color;
        };
        var cat1 = new Cat("大明","黄色");
        console.log(cat1.type);

        //prototype 
        function Animal(){   //动物对象   父
            this.type = '动物'
        };
        function Cat(name,color){   //猫对象   子
            this.name = name;
            this.color = color;
        };
        Cat.prototype = new Animal();
        var cat1 = new Cat("大明","黄色");
        console.log(cat1.type);

        //直接继承
        function Animal(){   //动物对象   父
            //this.type = '动物'
        };
        Animal.prototype.type='动物';
        function Cat(name,color){   //猫对象   子
            this.name = name;
            this.color = color;
        };
        Cat.prototype = Animal.prototype;
        var cat1 = new Cat("大明","黄色");
        console.log(cat1.type);

        //这种方式省内存,更优,缺点Cat.prototype和Animal.prototype指向了同一个对象
        function Animal(){   //动物对象   父
            //this.type = '动物'
        };
        Animal.prototype.type='动物';
        function Cat(name,color){   //猫对象   子
            this.name = name;
            this.color = color;
        };
        Cat.prototype = Animal.prototype;
		Cat.prototype.aaa = 'aaa';
        var cat1 = new Cat("大明","黄色");
        console.log(Animal.prototype);


    }
    </script>
</head>
<body>
    
</body>
</html>

本博客所有文章仅用于学习、研究和交流目的,欢迎非商业性质转载。

博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高,不足和错误之处在所难免,希望大家能够批评指出。

博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的文章,请原谅博主成为一个无耻的文档搬运工!

原文地址:https://www.cnblogs.com/Dewumu/p/14395333.html