美文网首页
javascript 对象的封装(一)---对象的创建

javascript 对象的封装(一)---对象的创建

作者: 交大小丑 | 来源:发表于2018-04-19 23:22 被阅读0次

    一、对象的创建方式

    1. 生成实例对象的原始模式 (对象直接量)
      假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。
    //单个对象创建
     var Cat = {
        name : '',
        color : ''
      } 
    

    也可能有读者说,你上面不是用字面量定义了一个对象吗? 不过这真的是一种“快捷方式”,在编程语言中,一般叫做“语法糖”。
    javascript的数据有两种,简单数据和复杂数据。简单数据有undefined,null,boolean,number和string这五种。复杂数据只有一种,即对象(object)。
    那么,在javascript中,数组是对象,函数也是对象,基本类型(number, string, boolean)包装类(Number,String,Boolean)也是对象。
    现在,我们需要根据这个原型对象的规格(schema),生成两个实例对象。

    //多个对象创建
    var cat1 = {}; // 创建一个空对象
        cat1.name = "大毛"; // 按照原型对象的属性赋值
        cat1.color = "黄色";
      var cat2 = {};
        cat2.name = "二毛";
        cat2.color = "黑色";
    

    好了,这就是最简单的封装了,把两个属性封装在一个对象里面。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法看出有什么联系。

    1. 通过普通函数 / 构造对象 返回一个对象
      2.1. 通过(普通)函数对象 返回一个对象
    function Cat(name,color) {
        return {
          name:name,
          color:color
        }
      }
    var cat1 = Cat("大毛","黄色");
    var cat2 = Cat("二毛","黑色");
    

    然后生成实例对象,就等于是在调用函数
    这种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。

    2.2. 通过(构造)函数对象 (通过new创建对象)
    为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。
    所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

    比如,猫的原型对象现在可以这样写,

    function Cat(name,color){
        this.name=name;
        this.color=color;
      }
    //创建对象
    var cat1 = new Cat("大毛","黄色");
    var cat2 = new Cat("二毛","黑色");
    alert(cat1.name); // 大毛
    alert(cat1.color); // 黄色
    //这时cat1和cat2会自动含有一个constructor属性,指向它们的构造函数。
    alert(cat1.constructor == Cat); //true
    alert(cat2.constructor == Cat); //true
    //Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。
    alert(cat1 instanceof Cat); //true
    alert(cat2 instanceof Cat); //true
    

    2.2.1 系统自带的的,eg:new Object(), Array(), Number(),Boolean(), Date()...
    单个对象创建

    var obj = new Object();
         obj.name = 'lyl';
         console.log(obj.name); //lyl
    

    多个对象创建
    工厂模式:使用的系统内部Object构造函数,创建的对象

    function createPerson(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){ alert(this.name); };
    return o; 
    }
    var person1 = createPerson('Nike',29,'teacher');
    var person2 = createPerson('Arvin',20,'student');
    

    在使用工厂模式创建对象的时候,我们都可以注意到,在createPerson函数中,返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了使用自定义构造函数创建对象。

    2.2.2 自定义的:为了和普通函数区分,首字母大写,采用大驼峰式写法(普通函数采用小驼峰式写法)

    //创建单个对象
    function Obj (name) {
             this.name = name;
             this.age = 18;
         }
         var obj = new Obj('lyl');
         console.log(obj.name); //lyl
         console.log(obj.age); //18
    
    //创建多个对象
    function Obj (name) {
             this.name = name;
             this.age = 18;
         }
         var obj = new Obj('lyl');
         var obj = new Obj('dfv');
    //
    

    自定义构造函数的基本构造原理:
    首先,文字理论解释一番,其实一切的关键全在与new这个操作符上,用new和不用new返回的结果大相径庭。不用new,则Obj('lyl')根本就是一个函数的正常执行,没有返回值,则默认返回undefined,而是用new操作符后js引擎就会将该函数看作构造函数看待,经过内部的一系列隐士操作,返回值就是一个对象了。
    看下如下demo:
    demo1:用new和不用new的区别演示:

    function Obj () {
             this.age = 18;
         }
       //   不用new
         console.log(Obj()); // undefined
       //  用new
         console.log(new Obj()); //Obj {age: 18}
    

    demo2 用new返回值为对象的基本原理:
    不用new,函数内的this指向的是window,所以this.xxx定义的变量都是window上的属性,但为什么使用new后其中的this就不是window对象了呢?那是因为:
    用new后,js引擎会在函数被进行两步隐士操作(假设构造函数名为Person):
    第一步, var this = Object.create(Peson.prototype); (也是创建对象的一种方法,下边会讲到) 隐士的改变函数内this的含义,现在函数内的this是一个原型为Person.prototype, 构造函数为Person的对象(其实此过程就将想要的对象基本创造成功了,只是差些属性而已,从此可是看出构造函数创建对象的最根本原理是借用Object.create()方法来实现的,只不过被封装功能化了);
    第二步, 在创建的对象设置完所需要的属性后,隐士的将创建的对象this通过return返回 return this;
    通过代码的展现:

    //  构造函数的原型
        Person.prototype = {
          say: function () {
            console.log('I am saying');
          }
        }
    
       //  构造函数
        function Person () {
         //  隐士操作
         // var this = Object.create(Person.prototype);
         
         //返回对象属性的设置
           this.name = 'lyl';
           this.age = 18;
    
         //  隐士操作
           // return this;
        }
    
        var person1 = new Person();
        console.log(person1.name); // lyl
        person1.say(); //I am saying
    

    上述两步理论的验证:
    第一步:现在函数内的this是一个原型为Person.prototype, 构造函数为Person的对象

    //  构造函数的原型
        Person.prototype = {
          say: function () {
            console.log('I am saying');
          }
        }
    
       //  构造函数
        function Person () {
    
           this.name = 'lyl';
           this.age = 18;
           // 打印this对象的原型
           console.log(this.__proto__); // 
           // 验证this是否是Person构造函数的实例
           console.log(this instanceof Person); //true
        }
        new Person();//打印结果如下
       //  Object say: ()__proto__: Object
       // true
    
        Person();//打印结果如下
       //  Window
       // false
    

    第二步:隐士的将创建的对象this通过return返回:
    由以上一些代码,我们已经可以看出返回的是满足条件的对象,现在我们创建对象时不用new,并显示的模拟这两步隐士操作来验证(我们不用new则两步隐士操作就不会产生)

    //  构造函数的原型
        Person.prototype = {
          say: function () {
            console.log('I am saying');
          }
        }
    
       //  构造函数
        function Person () {
          var that = Object.create(Person.prototype);
    
           that.name = 'lyl';
           that.age = 18;
           
           return that;
        //提前返回that导致return this无法执行而失效
        }
    
        var person = new Person();
       //此处不用new也是可以成功返回一个满足条件的对象,因为显示的返回了that
        console.log(person.name); //lyl
        person.say(); //I am saying
    

    p.s. 关于显示返回that的问题,当我们用new生成对象,若我们显示return的是一个对象 / 引用值,则会导致return this失效,若返回的是原始值,则return this不会失效

    1. 原型创建对象模式(通过原型创建对象)
      构造函数方法很好用,但是存在一个浪费内存的问题。
    function Cat(name,color){
        this.name = name;
        this.color = color;
        this.type = "猫科动物";
        this.eat = function(){alert("吃老鼠");};
      }
    //生成实例
    var cat1 = new Cat("大毛","黄色");
    var cat2 = new Cat ("二毛","黑色");
    alert(cat1.type); // 猫科动物
    cat1.eat(); // 吃老鼠
    //表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。
    alert(cat1.eat == cat2.eat); //false
    

    能不能让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的。
    Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。
    这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

    function Cat(name,color){
        this.name = name;
        this.color = color;
      }
    Cat.prototype.type = "猫科动物";
    Cat.prototype.eat = function(){alert("吃老鼠")};
    var cat1 = new Cat("大毛","黄色");
    var cat2 = new Cat("二毛","黑色");
    alert(cat1.type); // 猫科动物
    cat1.eat(); // 吃老鼠
    //这时所有实例的type属性和eat()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。
    alert(cat1.eat == cat2.eat); //true
    

    3.2 Prototype模式的验证方法
    为了配合prototype属性,Javascript定义了一些辅助方法,帮助我们使用它。
    1) isPrototypeOf()
    这个方法用来判断,某个proptotype对象和某个实例之间的关系。

    function Cat(name,color){
        this.name = name;
        this.color = color;
      }
    Cat.prototype.type = "猫科动物";
    Cat.prototype.eat = function(){alert("吃老鼠")};
    var cat1 = new Cat("大毛","黄色");
    var cat2 = new Cat("二毛","黑色");
    alert(cat1.type); // 猫科动物
    cat1.eat(); // 吃老鼠
    alert(Cat.prototype.isPrototypeOf(cat1)); //true
    alert(Cat.prototype.isPrototypeOf(cat2)); //true
    

    2)hasOwnProperty()
    每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。

    function Cat(name,color){
        this.name = name;
        this.color = color;
      }
    Cat.prototype.type = "猫科动物";
    Cat.prototype.eat = function(){alert("吃老鼠")};
    var cat1 = new Cat("大毛","黄色");
    var cat2 = new Cat("二毛","黑色");
    alert(cat1.type); // 猫科动物
    cat1.eat(); // 吃老鼠
    alert(Cat.prototype.isPrototypeOf(cat1)); //true
    alert(Cat.prototype.isPrototypeOf(cat2)); //true
    alert(cat1.hasOwnProperty("name")); // true
    alert(cat1.hasOwnProperty("type")); // false
    

    3) in运算符
    in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。

    function Cat(name,color){
        this.name = name;
        this.color = color;
      }
    Cat.prototype.type = "猫科动物";
    Cat.prototype.eat = function(){alert("吃老鼠")};
    var cat1 = new Cat("大毛","黄色");
    var cat2 = new Cat("二毛","黑色");
    alert(cat1.type); // 猫科动物
    cat1.eat(); // 吃老鼠
    alert(Cat.prototype.isPrototypeOf(cat1)); //true
    alert(Cat.prototype.isPrototypeOf(cat2)); //true
    alert("name" in cat1); // true
    alert("type" in cat1); // true
    //in运算符还可以用来遍历某个对象的所有属性。
    for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }
    

    3.3. 组合使用构造函数模式和原型模式
    根据原型与构造函数的特点,可以组合使用构造函数模式和原型模式

    function Person(name,age,job){
    this.name =name;
    this.age = age;
    this.job = job;
    }
    Person.prototype = {
    constructor:Person,
    sayName: function(){
    alert(this.name);
    };
    }
    var person1 = new Person('Nike',20,'teacher');
    
    1. Object.create(原型); 创建一个继承该原型的实例对象(Object.creat())
    var f4 = {x: 1};
    var t4 = Object.create(f4);
    //如果f4的属性改变,t4相应的属性也会改变
    

    关于此方法的一些注意事项:

    (1)、若传参为Object.prototype,则创建的原型为Object.prototype,和 new Object()创建的对象是一样的

    Object.create(Object.prototype) <==>new Object(); 
    

    (2)、若传参为空 或者 null,则创建的对象是没有原型的, 导致该对象是无法用document.write()打印会报错,因为document.write()打印的原理是调用Object.prototype.toString()方法,该对象没有原型,也就没有该方法,所以document.write()无法打印
    由此延伸的知识点: 引用值都也是算作是对象,所以都可以用document.write()打印;原始值numebr, boolean, string都有自己对象的包装类,借助此机制也是可以用document.write()打印出的;但undefined 和 null既不是引用值,也没有对应的包装类,所以应该无法打印的,但大家会发现这两个值也是可是用document.write()打印的,因为这两个值被设定为特殊值,document.write()打印其是不用调用任何方法的,而是之直接打印其值

    二、创建的对象的本质

    以上四种方法看似不同,但他们的本质是一样的,都是通过最基本的new Object()与原型来实现对象的创建的。
    使用构造器创建对象,其本质如下:

    image

    对象的__proto__指向了构造器的prototype,所以修改构造器的属性不会影响对象,但是修改构造器原型会。
    使用Object.create()

    image

    对象的__proto__ 指向了构造器,所以可以通过修改父对象影响对象的属性

    三、__proto__prototype

    __proto__prototype是比较容易混淆的两个属性。__proto__是对象的属性,用来在原型链上查找你需要的方法的实际对象。prototype是函数独有的属性当我们使用关键词new并且将函数作为构造函数来构造对象的时候, 它被用来构建对象的__proto__属性.
    对于非函数的对象来说比较简单只有__proto__,但是函数也是对象,所以在函数中__proto__prototype同时存在,一个函数作为构造器时,参与其中的是prototype属性,但是被创建时,__proto__指向了Function.prototype

    参考:

    JS对象创建的几种方式整理javascript技巧脚本之家 http://www.jb51.net/article/107012.htm

    js之对象(经典) - 最骚的就是你 - 博客园 https://www.cnblogs.com/libin-1/p/5911190.html

    Javascript 面向对象编程(一):封装 - 阮一峰的网络日志 http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

    js对象的创建 - 简书 https://www.jianshu.com/p/6377784b62b2?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    简单理解javascript中apply()和call() - CSDN博客 https://blog.csdn.net/iamchuancey/article/details/78177028

    相关文章

      网友评论

          本文标题:javascript 对象的封装(一)---对象的创建

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