面向对象--第二弹创建对象

2017-04-20  本文已影响0人  赵BW

JS创建对象的方式:
下面的例子,我们都是new一个人的对象。这个对象有方法和属性。


对象字面量:
 var person = {
       name:'zhaobw',
       age:23,
       gender:'man',
       run:function(){
             console.log("我会跑步");
       }
 }

我们创建了一个person对象。调用对象的方法和属性如下操作:

 console.log(person.name);   //zhaobw   
 console.log(person.age);    //23
 console.log(person.gender); //man
 person.run();               //我会跑步

缺点:特麻烦。为什么麻烦?

利用内置对象来创建对象
  var str = new String(); 
  var obj = new Object();
  obj.name = "zhaobw";
  obj.age = "22";
  obj.gender = "man";
  obj.run = fnction(){
     console.log("我会跑步");
  }

缺点:还是麻烦。同上。

构造函数--工厂模式
 function Person(name,age,gender){
      var obj = new Object();
      obj.name = name;
      obj.age = age;
      obj.gender = gender;
      obj.run = function(){
         console.log("我会跑步");
      };
      return obj;
 }

缺点:没有语法new和想象的中的不一样。还有一个严重的问题就是函数不是共用的。举个例子:
var Tom = Person(tom,22,man);
var Zhaobw = Person(zhaobw,23,man);

构造函数 -- new
 function person(name,age,gender){
      this.name = name;
      this.age = age;
      this.gender =gender;
      this.run = function(){
         console.log("我会跑步");
      }
 }
 var tom = new person("zhaobw",23,man);

缺点:函数还是不能共用。


new这个操作做了这几步:


new做的操作其实就是帮我们前面的创建对象的方法。少写了几步。这是来自JS之父的关爱。是不是很有爱。new的作用就是可以让我们少些几行代码。所以就是个语法糖。这都是前辈的关爱。


现在就剩下函数共用的问题没有解决了。来吧放大招了。


原型模式(名字很吓人,别怕)
 function person(name,age,gender){
      this.name = name;
      this.age = age;
      this.gender =gender
 }
 person.prototype.run = function(){
         console.log("我会跑步");           
 }

这样就解决了函数共用的问题。和上面的写法的有什么区别?
就是多了个prototype--原型。关于原型我会单独写一章。这个很有用的。
好了。 共用的放在原型里,不一样的放够着函数里。

这篇文章从最初怎么创建对象,以及为什么这么创建一步步写下来了。希望对你有用。本文涉及了this、原型。这些概念我会在后面详细讲解。一起努力吧。

上一篇 下一篇

猜你喜欢

热点阅读