對象建立的幾種方式

時間 2020-03-24
標籤對象建立幾種方式简体版
原文原文鏈接
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            // 1    {}
            var a = {};
            a.name = "john";
            a.age = 22;
            a.sayHello = function(){
                console.log(this.name);
            }
            a.sayHello();
            console.log(a.name + "," + a.age);

            // 2    new Object()
            var b = new Object();
            b.name = "jx";
            b.age = 21;
            b.sayHello = function(){
                console.log(this.name + "," + this.age);
            }
            b.sayHello();
            console.log(typeof b)
            console.log(b instanceof Object)

            // 3    字面量
            var person = {
                name:"pd",
                age:20,
                sayHello:function(){
                    console.log(this.name + "," + this.age);
                }
            }
            person.sayHello();
            console.log(typeof person);

            // 4    工廠模式
            function obj(name,age){
                var a = new Object;
                a.name = name;
                a.age = age;
                a.sayHello = function(){
                    console.log(this.name + "," + this.age)
                }
                return a
            }

            var a1 = obj("nv",25);
            var a2 = obj("sd",28);
            a1.sayHello();
            a2.sayHello();

            //  5   構造函數建立
            function Person(name,age){
                this.name = name;
                this.age = age;
                this.sayHello = function(){
                    console.log(this.name + "," + this.age);
                }
            }
            var person2 = new Person("mv",29);
            var person3 = new Person("be",30);

            person2.sayHello();
            person3.sayHello();
            console.log(typeof person2,typeof person3);
            console.log(person2.sayHello === person3.sayHello)
            // 沒解決方法共享問題

            //  6   原型模式建立
            function Animal(){};
            Animal.prototype.name = "sdf";
            Animal.prototype.age = 23;
            Animal.prototype.sayHello = function(){
                console.log(this.name + "," + this.age);
            }
            var animal1 = new Animal();
            var animal2 = new Animal();

            animal2.name = "bsdb"

            animal1.sayHello();
            animal2.sayHello();

            console.log(typeof animal1,typeof animal2);
            console.log(animal1.sayHello === animal2.sayHello);

            //  6-1     原型模式2
            function Animal1(){};
            Animal1.prototype = {
                name:"sadf",
                friends:['car','dog'],
                age:56,
                sayHello:function(){
                    console.log(this.name + ',' + this.age + ',' + this.friends);
                }
            }
            var animal3 = new Animal1();
            var animal4 = new Animal1();
            animal3.friends.push('snake');
            animal4.friends.push('sheep');
            animal4.name = "xcv";
            animal3.name = "bnf";
            console.log(animal3.friends)
            console.log(animal4.friends)
            animal3.sayHello();
            animal4.sayHello();
            //若是裏面有引用類型friend  則改一個全改

            //  原型+構造函數
            function Power(name,age){
                this.name = name;
                this.age = age;
                this.friends = ['car','bus'];
            }
            Power.prototype.sayHello = function(){
                console.log(this.name + ',' + this.age + ',' + this.friends)
            }
            var power = new Power('bcb',56);
            var power1 = new Power('nbgh',89);

            power.friends.push('caps');
            power1.friends.push('faker')

            power.sayHello();
            power1.sayHello();

            console.log(power.friends)
            console.log(power1.friends)
        </script>
    </body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。