zoukankan      html  css  js  c++  java
  • js中的面向对象--类似于类的概念

    创建对象的几种常用方式

    1.使用Object或对象字面量创建对象

    2.工厂模式创建对象

    3.构造函数模式创建对象

    4.原型模式创建对象

    1.使用Object或对象字面量创建对象

    使用object

    var student = new Object();
    student.name = "easy";
    student.age = "20";

    使用字面量

    var sutdent = {
      name : "easy",
      age : 20
    };

    2.工厂模式创建对象

    function createStudent(name, age) {
      var obj = new Object();
      obj.name = name;
      obj.age = age;
      return obj;
    }
    
    var student1 = createStudent("easy1", 20);
    var student2 = createStudent("easy2", 20);
    ...
    var studentn = createStudent("easyn", 20);

    3.构造函数模式创建对象

    在上面创建Object这样的原生对象的时候,我们就使用过其构造函数

    var obj = new Object();

    在创建原生数组Array类型对象时也使用过其构造函数:

    var arr = new Array(10);  //构造一个初始长度为10的数组对象

    我们首先了解一下构造函数普通函数有什么区别。

    1、实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法。对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数。

    2、按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者。例如上面的new Array(),new Object()。

    3、使用new操作符调用构造函数时,会经历(1)创建一个新对象;(2)将构造函数作用域赋给新对象(使this指向该新对象);(3)执行构造函数代码;(4)返回新对象;4个阶段。

    ok,了解了构造函数普通函数的区别之后,我们使用构造函数将工厂模式的函数重写,并添加一个方法属性:

    function Student(name, age) {
      this.name = name;
      this.age = age;
      this.alertName = function(){
        alert(this.name)
      };
    }
    
    function Fruit(name, color) {
      this.name = name;
      this.color = color;
      this.alertName = function(){
        alert(this.name)
      };
    }

    这样我们再分别创建Student和Fruit的对象

    var v1 = new Student("easy", 20);
    var v2 = new Fruit("apple", "green");

    这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了:

    alert(v1 instanceof Student);  //true
    alert(v2 instanceof Student);  //false
    alert(v1 instanceof Fruit);  //false
    alert(v2 instanceof Fruit);  //true
    
    alert(v1 instanceof Object);  //true 任何对象均继承自Object
    alert(v2 instanceof Object);  //true 任何对象均继承自Object

    可以将上面的函数简化:Student和Fruit对象中共有同样的方法移到构造函数外部

    function Student(name, age) {
      this.name = name;
      this.age = age;
    }
    function Fruit(name, color) {
      this.name = name;
      this.color = color;
    };
    
    function alertName() {
      alert(this.name);
    }

    我们通过将alertName()函数定义为全局函数,这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数,解决了内存浪费的问题

    但是,通过全局函数的方式解决对象内部共享的问题,终究不像一个好的解决方法。如果这样定义的全局函数多了,我们想要将自定义对象封装的初衷便几乎无法实现了。

    更好的方案是通过原型对象模式来解决。

    4.原型的模式创建对象

    原型链甚至原型继承,是整个JS中最难的一部分也是最不好理解的一部分,在这里由于我们课程定位的原因,如果对js有兴趣的同学,可以去查阅一下相关JS原型的一些知识点。

    function Student() {
        this.name = 'easy';
        this.age = 20;
    }
    
    
    Student.prototype.alertName = function(){
        alert(this.name);
    };
    
    var stu1 = new Student();
    var stu2 = new Student();
    
    stu1.alertName();  //easy
    stu2.alertName();  //easy
    
    alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数
  • 相关阅读:
    iOS事件机制,以及不同手势使用touchesBegan等表现形式
    UIview 动画
    核心动画与UIView
    代理与Block
    关于清除浮动的几个写法
    关于一个自适应屏幕的高宽
    关于loading 的一个css样式
    用margin还是用padding?(3)—— 负margin实战
    jquery回顾part1——选择器
    解读mysql主从配置及其原理分析(Master-Slave)
  • 原文地址:https://www.cnblogs.com/mmyy-blog/p/9540594.html
Copyright © 2011-2022 走看看