javascript 对象的封装（一）---对象的创建

2018-04-19 本文已影响0人交大小丑

一、对象的创建方式

生成实例对象的原始模式（对象直接量）
假定我们把猫看成一个对象，它有"名字"和"颜色"两个属性。

//单个对象创建
　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 = "黑色";

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

通过普通函数 / 构造对象返回一个对象
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不会失效

原型创建对象模式（通过原型创建对象）
构造函数方法很好用，但是存在一个浪费内存的问题。

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');

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 对象的封装（一）---对象的创建

一、对象的创建方式

二、创建的对象的本质

三、`proto`与`prototype`

参考：

猜你喜欢

热点阅读

javascript 对象的封装（一）---对象的创建

一、对象的创建方式

二、创建的对象的本质

三、__proto__与prototype

参考：

猜你喜欢

热点阅读

三、`proto`与`prototype`