美文网首页
js面向对象--设计方法

js面向对象--设计方法

作者: 柠檬糖 | 来源:发表于2017-02-23 19:03 被阅读0次
    • 字面量法
      结构
      var 对象 = {
      属性名01:属性值,
      属性名02:属性值,
      方法01:function(){函数体}
      }
      适用场合:只需简单创建单个对象
      问题:如果需要创建多个相似的对象,那么代码中冗余度太高(重复的代码太多)
      代码:
    var book1 = {
            name:"悟空传",
            author:"今何在",
            press:"湖南文艺出版社",
            price:"28.00",
            logDes:function(){
                console.log("书名:" + this.name + "作者:" + this.author);
            }
        }
    
    • 内置构造函数法
     var book1 = new Object();
        //01 设置属性
        book1.name = "花田半亩";
        book1.author = "田维";
        book1.price = "40.01";
    
        //02 设置方法
        book1.logDes = function (){
            console.log("书名:" + this.name);
        }
    

    问题:如果需要创建多个相似的对象,那么代码中冗余度太高(重复的代码太多)

    • 工厂法
      对于内置法把固定的部分提取写成函数的函数体,把变化的部分提取,作为参数传递
    function createBook(name,author){
            //01 创建空的对象
            var o = new Object();
            //02 设置属性和方法
            o.name = name;
            o.author = author;
            o.logDes = function(){
                console.log("作者是:" + this.author);
            }
    
            //04 返回新创建的对象
            return o;
        }
    

    问题:如果创建多个不同类型的对象,那么我们无法分辨

    function createPerson(name,age){
            var o = new Object();
            o.name = name;
            o.age = age;
            return o;
        }
    
        function createDog(name,age)
        {
            var o = new Object();
            o.name = name;
            o.age = age;
            return o;
        }
    
        //创建具体的对象
        var obj1 = createPerson("张三",88);
        var obj2 = createDog("阿黄",6);
    
        
        console.log(obj1.constructor);  //Object
        console.log(obj2.constructor);  //Object
    

    最终的返回值类型都是Object类型,只看结果不能够准确的辨认obj1和obj2对应的都是谁

    • 构造法
      001 提供一个构造函数
      002 通过this指针来设置属性和方法
      003 通过new操作符创建对象
    function Person(name,age){
            // 默认 创建对象
            //var o = new Object();
    
            //默认会赋值给this
            //this = o;
    
            // 01 通过this指针来设置属性和方法
            this.name = name;
            this.age = age;
            this.showName = function(){
                console.log(this.name);
            };
            this.showAge = function(){
                console.log(this.age);
            }
    
            //默认返回
            //return this;
        }
    
        //03 使用new操作符来创建对象
        var p1 = new Person("张三",20);
        var p2 = new Person("张老汉",200);
        console.log(p1);
        console.log(p2);
    

    自定义构造函数方式创建对象内部的实现细节
    01 我们在使用new关键字调用构造哈函数的时候,内部默认会创建一个空的对象
    02 默认会把这个空的对象赋值给this
    03 通过this来设置新对象的属性和方法
    04 在构造哈函数的最后,默认会把新创建的对象返回

    自定义构造函数和工厂函数对比
    001 函数的名称不一样,构造函数首字母大写
    002 自定义构造函数创建方式内部会自动的创建空对象并且赋值给this
    003 默认会自动返回新创建的对象

    返回值
    01 没有显示的return ,默认会把新创建的对象返回
    02 显示的执行了return语句,就得看具体的情况
    001 返回的是值类型,那么直接忽略该返回,把新创建的对象返回
    002 返回的是引用类型的数据,会覆盖掉新创建的对象,直接返回引用数据类型的值

    function Dog(name)
            {
                this.name = name;
                //return "demo";  忽略
                return function (){console.log(name);};最终返回的值
            }
    
            var dog = new Dog("阿黄");
            console.log(dog);
    
            //function (){console.log(name) -->返回值
    

    相关文章

      网友评论

          本文标题:js面向对象--设计方法

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