对象创建的方法

js创建对象的方式 

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <!--

        封装:将数据和数据的操作方法集中在一起

        继成:一个类型的对象可以访问其父类的属性和方法

        多态:同一种方法作用于不同的对象,会有不同的结果

    -->





    <body>

        <!--

            对象创建的方法:

        -->

        <script type="text/javascript">

            /*

                字面量创建方式

                1.此法基本不用,因为会造成代码冗余(缺点)

             */

                var obj = {

                    name : "asd",

                    height:185,

                    sayHello:function(){

                        console.log(this.name);

                    }

                }

                obj.sayHello();



            /*

                2.利用构造函数创建对象

                    构造函数也是函数,必须用 new 运算符来调用,否则就是普通函数

             * */

                function foo(name,age){

                    this.name = name;

                    this.age = age;

                    this.sayHello=function(){

                        console.log(this.name);

                    }

                }

                var dog = new foo("gou",25);

                var cat = new foo("mao",25);

                console.log(dog.sayHello == cat.sayHello);//false

                //可见:结果为false,说明用构造函数创建对象,每创建一个对象,都会创建一个新的相同的方法,会增加内存的开销(缺点)

                console.log(dog.sayHello() == cat.sayHello());//true

                console.log(dog.sayHello,dog.sayHello());

                //dog.sayHello在传给具体的对象之后,因为对象地址不同,所以不相等了

                //dog.sayHello()是一个值,在这里,只是相等的,所以结果是true



            /*

                3.工厂模式,创建出来的对象都是一样的,例如:

             * */

                function createObject(name,age){

                    var obj = new Object();

                    obj.name = name;

                    obj.age = age;

                    obj.sayHello = function(){

                        console.log(this.name);

                    }

                    return obj;                 //注意这句,return创建的对象

                }

                var yh = new createObject("yh",20);

                var wcn = new createObject("wcn",20);

                console.log(yh instanceof Object);

                console.log(wcn instanceof Object);

                console.log(typeof yh);

                //缺点:无法判断对象的类型(比如Person类,Animal类)



            /*

                4.利用原型来创建对象( 把属性都挂在在原型上)

                    a.每一个构造函数都有一个原型对象

                    b.每一个原型对象都有一个指向构造函数的指针

                    c.每一个实例都有指向原型对象的内部指针

                    d.原型对象上的方法和属性能被实例所访问

             * */

                function Person(){


                }

                Person.prototype.name = "john";

                Person.prototype.age = 20;

                Person.prototype.sayHello = function(){

                    console.log(this.name);

                }


                var person1 = new Person();

                var person2 = new Person();

                console.log(person1.sayHello == person2.sayHello);//true

                //可见,利用原型创建对象不会重复生成相同的对象,但是,创建的属性也是一样的。即它是无法传参的



            /*5.组合创建(构造函数和原型对象的组合):

                把属性放在构造函数(function foo(){})里,把方法放在原型对象上(prototype)

                优点:

                    1.避免了利用原型创建对象需要太多的声明(每个属性,每个方法);

                    2.避免了工厂模式下,每次产生新对象都要创建新的,相同的方法,增加内存开销

            */

            /*如下:

                构造一个person类,他有几个属性(放在构造函数(function foo(){})里),

                和几个方法(放在原型对象上(prototype)).

                开始:

                * */

            //属性

            function Person(name,age,hei){//注意类名开头大写

                this.name = name;

                this.age = age;

                this.hei = hei;

            }

            //方法

            Person.prototype.sayHello = function(){//声明原型对象的方法

                console.log("我叫"+this.name+",我今年"+this.age+"岁")

            }

            //生成对象(实例):


            var yh = new Person("尹豪",20,185);

            yh.sayHello();                      //对象(实例)调用了自己的对象

            console.log(yh instanceof Person);  //可以检验yh是属于Person类的



            /*

            6.ES6的创建方法

             * */

            class Person{

                constructor(name,age,height){       //属性构造

                    this.name = name;

                    this.age = age;

                    this.height = height

                }

                say(){

                    console.log(this.name);         //方法

                }

                fly(){

                    console.log(this.height);           //方法

                }

            }

            var p1 = new Person(name,age,height);

        </script>

    </body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容

  • 一、对象的定义在ECMAScript-262中,对象被定义为“无序属性的集合,其属性可以包含基本值,对象或者函数”...
    Jasmine_dc8b阅读 458评论 0 1
  • title: js面向对象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618阅读 564评论 0 2
  • var a = 1; console.log(typeof a);// 'number' var b = '1';...
    zdnexus阅读 325评论 0 0
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,734评论 2 17
  • 学校后街住着唯一的一户农家,种着各种瓜果蔬菜,供给学校。这对年轻农家夫妇非常勤劳,日出而作,日落而息,但是平静的日...
    BEGINE阅读 218评论 0 2