美文网首页
构造函数和原型对象

构造函数和原型对象

作者: AnnQi | 来源:发表于2017-08-15 18:26 被阅读0次

    一、构造函数

    构造函数:定义一类相同结构的对象

    构造函数就是用 new 创建对象是调用的函数。构造函数的区别就是函数名首字母大写

    <script>
        /*构造函数就是用 new 创建对象是调用的函数。*/
        function Person(){
    //       构造函数的区别就是函数名首字母大写
        }
    
        var person1 = new Person();
        var person2 = new Person();
    
        console.log(person1 instanceof Person);    //true
        console.log(person2 instanceof Person);    //true           // instanceof 运算符
    
        console.log(person1.constructor === Person);    //true
        console.log(person2.constructor === Person);    //true
    </script>
    
    <script>
        function Person(name){
            this.name = name;
            this.sayName = function(){
                console.log(this.name);
            };
        }
    
        var person1 = new Person("Anqi");
        var person2 = new Person("mingming");
    
        console.log(person1.name);
        console.log(person2.name);
    
        person1.sayName();
        person2.sayName();
    </script>
    
    可以在构造函数中用 Object.defineProperty() 方法来初始化
    <script>
        function Person(name){
            Object.defineProperty(this,"name",{
                get:function(){
                    return name;
                },
                set:function(newName){
                    name = newName;
                },
                enumerable:true,
                configurable:true
            });
            this.sayName = function(){
                console.log(this.name);
            }
        }
    
        var person1 =Person("Anqi");
    
        console.log(person1 instanceof Person);   //false
        console.log(typeof  person1);          //undefined
        console.log(name);              //Anqi
    </script>
    

    一、原型对象(prototype)

    1、原型对象:是可以把原型对象看作是对象的基类

    所有的函数(除了一些内建函数)都有一个 prototype 的属性,该属性是一个原型对象用来创建新的对象实例。

    <script>
        var objece = {};
        var prototype = Object.getPrototypeOf(objece);
    //      getPrototypeOf()方法读取属性的值
    
        console.log(prototype === Object.prototype);
    
        console.log(Object.prototype.isPrototypeOf(objece));
    //      isPrototypeOf()方法检查对象是否是另一个对象的原型对象
    
    </script>
    

    原型对象具有一个 constructor(构造器)属性,这是其他对象实例没有的。
    当一个函数被创建时,它的 prototype 属性也被创建,且该原型对象的 constructor 属性指向该函数。

    <script>
        function Person(name){
            this.name = name;
        }
        Person.prototype = {
    //    重置constructor 属性
            constructor:Person,
    
            sayName:function(){
                console.log(this.name);
            },
            toString:function(){
                return "[Person"+ this.name +"]";
            }
        };
    
        var person1 = new Person("Anqi");
    
        console.log(person1 instanceof Person);
        console.log(person1.constructor === Person);
        console.log(person1.constructor === Object);
    
    //
    //    原型对象具有constructor(构造器)属性,这是其他对象实例没有的。
        
    </script>
    
    3107331-54f4c5baa30936f5.png 3107331-1378acf2d9273b73.png 3107331-507bf1f6038c9507.png
    2、改变原型对象

    当你在一个对象上使用 Object.seal() 和 Object.freeze() 时,完全是在操作对象的自有属性。
    你无法添加自有属性或改变冻结对象的自有属性,但任然可以通过在原型对象上添加属性来扩展这些对象。

    <script>
        function Person(name){
            this.name = name;
        }
        Person.prototype = {
    //    重置constructor 属性
            constructor:Person,
    
            sayName:function(){
                console.log(this.name);
            },
            toString:function(){
                return "[Person"+ this.name +"]";
            }
        };
    
        var person1 = new Person("Anqi");
        var person2 = new Person("mingming");
    
        console.log("sayHi" in person1);
        console.log("sayHi" in person2);
    
        Person.prototype.sayHi = function(){
            console.log("Hi");
        };
    
        person1.sayHi();
        person2.sayHi();
    </script>
    
    3、内建对象的原型对象
    • reduce() 方法——减少
    • substring() 方法——“第几个字符”
    <script>
        Array.prototype.sum = function(){
            return this.reduce(function(previous,current){
                return previous + current
            })
        };
        var num = [1,2,3];
        console.log(num.sum());
    
        var str="hello";
        console.log(str.substring(1))
    </script>
    

    相关文章

      网友评论

          本文标题:构造函数和原型对象

          本文链接:https://www.haomeiwen.com/subject/fmuvrxtx.html