js面向对象编程之创建对象

JavaScript的所有数据都可以看成对象,那是不是我们已经在使用面向对象编程了呢?
  当然不是。如果我们只使用Number、Array、string以及基本的{...}定义的对象,还无法发挥出面向对象编程的威力。
  JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#,很好,你一定明白面向对象的两个基本概念:
  类:类是对象的类型模板,例如,定义Student类来表示学生,类本身是一种类型,Student表示学生类型,但不表示任何具体的某个学生;
  实例:实例是根据类创建的对象,例如,根据Student类可以创建出xiaoming、xiaohong、xiaojun等多个实例,每个实例表示一个具体的学生,他们全都属于Student类型。
  所以,类和实例是大多数面向对象编程语言的基本概念。不过,在JavaScript中,这个概念需要改一改。JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。  -《廖雪峰JS教程》

上面的解释我觉得很到位,这里就不再多讲了,直接上代码(代码就是最好的文档,网上有人说为什么开源项目的文档没多少看,其实那是因为能看懂代码的人都直接看代码了_):

//js 会给每个创建的对象设置一个原型,指向它的原型对象
var arr=[1,2,3];
/**
 * arr对象 其原型对象就是Array,因此js中存在着原型链,arr ----> Array.prototype ----> Object.prototype ----> null
 * 
 * 由于js定义了Array.prototype中定义了sort(),indexof()等方法,因此你可以在所有的Array对象上直接调用这些方法。所以可以arr.sort();
 */

 /**
  * 在js中函数也是对象。因此函数也有自己的原型链
  */

  function student() {
      console.log('测试');
  }

  // student->Function.prototype->Object.prototype->null


  //js 创建对象主要由以下两种方法
  //方法一 通过{...}

  var  zhaotong={
      name:'zhaotong',
      age:23,
      hello:function () {
          console.log(`${this.name} 是 ${this.age} 岁 `);
      }
  };

  zhaotong.hello();


  //方法二 通过new 关键字来创建

  function Student(name) {
      this.name=name;
      this.hello=function () {
          console.log(`我是${this.name}`);
      }      
  };

   var zhaotong1=new Student('zhaotong1');
   var zhaotong2=new Student('zhaotong2');

   zhaotong1.hello();
   zhaotong2.hello();

   //这里大家会发现,我们每次去重新创建一个学生对象,都会去创建一个hello方法,虽然代码都是一样的,但他们确实两个不同的函数
   //其实这么多对象只需要共享一个hello函数即可,因此根据对象查找原则,我们将hello方法放在Student对象上,便可以实现共享

   Student.prototype.hello=function(){
       console.log(`我是${this.name}`);
   }

   //此外用new创建的对象,还从其原型对象上获得了一个constructor 属性,它门指向Student对象本身
    
  console.log(zhaotong1.constructor==Student.prototype.constructor);//true
  console.log(Student.prototype.constructor==Student);//true
  console.log(Object.getPrototypeOf(zhaotong1)==Student.prototype);//true
  console.log(zhaotong1 instanceof Student);//true


  //下面的一个例子是在廖雪峰老师的教程中看到的一个写法,个人感觉很好,特此记录。
  
  function Teacher(props) {
     this.name=props.name||'no-name';
     this.age=props.age||23      
  }

  Teacher.prototype.hello=function (){
      console.log(`${this.name}是${this.age}岁!`);
  };

  function createTeacher(props) {
      return new Teacher(props||{})
  }

  var zhaotong3=createTeacher({name:'zhaotong'});

  zhaotong3.hello();

上面代码的运行结果如下

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,764评论 18 399
  • 第一章 面向对象编程和面向协议编程 这本书是关于面向协议编程的。当苹果在 2015 年世界开发者大会上宣布 Swi...
    焉知非鱼阅读 5,013评论 19 25
  • 死亡是人类所有恐惧的根源。 从小在铁路旁长大。常见的死亡是在铁轨边看到身首异处的老鼠,尸体肿胀得很大。估计是夜间在...
    心理师静怡阅读 536评论 4 3
  • 不要去羡慕别人的人生,你看见的,并不是他们经历的所有。 你只羡慕他们的光鲜外表,却看不到他们为此付出的代价和努力。...
    呜呼阅读 291评论 0 2
  • 第2级:储蓄者 他们储蓄通常是为了消费而不是为了投资(例如,攒钱买新电视、汽车,去度假等)。 这个等级的人经常浪费...
    fubaba学财商阅读 199评论 0 1