zoukankan      html  css  js  c++  java
  • 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>
    

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

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

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

  • 相关阅读:
    计算机网络面试题总结
    为0LTP选择RDMBS时,你都需要考虑哪些?
    Redis集群搭建与简单使用
    Innodb关键特性之自适用Hash索引
    关于MySQL的commit非规律性失败案例的深入分析
    MySQL存储写入性能严重抖动分析
    【Linux】管理文件系统
    【Linux】YUM源搭建
    【Linux】计划任务
    【Linux】日志分析及管理
  • 原文地址:https://www.cnblogs.com/Dewumu/p/14395333.html
Copyright © 2011-2022 走看看