欢迎来到夜的世界

莫听穿林打叶声,何妨吟啸且徐行。竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生.料峭春风吹酒醒,微冷,山头斜照却相迎。回首向来萧瑟处,归去,也无风雨也无晴。
扩大
缩小

JS 中的面向对象

  创建对象的集中常见方式

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

  2 . 工厂模式创建对象

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

  4 . 原型模式创建对象  

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

       JS  中基本创建对象的方式 : 

var student = new Object();
student.name = "Tom";
student.age = 18;
student.fav = function(){
           alert(this.name);
}  
student.fav();        

       使用 字面量方式创建对象 : 

    var student = {
        name:"91赵先生",
        age:18,
        fav:function(){
            alert(this.name)
        }
    };
    student.fav();

     但是有个问题,当我们要创建同类的student1 , student2 .......,代码会重复.所以就有了工厂模式

 

  2 . 工厂模式创建对象      

    JS中没有类的概念,那么我们就使用一种函数将以上对象创建过程封装起来,以便于重复使用,同时给出特定出口来初始化对象.

    function createStudent(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        return name;
    }

    var student1 = createStudent("Tom",18);
    var student2 = createStudent("firskt",19)

    console.log(student1);
    console.log(student2);

       但是这个也有问题就是不知道出来的数据是哪个类型的.

  比如说我们有定义了个"水果的类型" creatFruit()函数 : 

function createFruit(name, color) {
  var obj = new Object();
  obj.name = name;
  obj.color = color;
  return obj;
}

var v1 = createStudent("easy1", 20);
var v2 = createFruit("apple", "green");

      对于以上代码创建的对象v1、v2,我们用instanceof操作符去检测,他们统统都是Object类型

        function createPerson(){
            var person = new Object();
            person.name = 'Tom';

            person.age = 18;

            person.fav = function() {
                
                alert(this.name);
            }
            return person;
        }


        
        function createFruit(){
            var fruit = new Object();
            fruit.name = 'Tom';

            fruit.age = 18;

            fruit.fav = function() {
                
                alert(this.name);
            }
            return fruit;
        }
        var p1 = createPerson();
        var f1 = createFruit();

        console.log(p1 instanceof Object);
        console.log(f1 instanceof Object);


//  true  true    结果

 

 

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

        function Person(name,age) {
            
            this.name = name;
            this.age = age;
            this.fav = function() {
                alert(this.name);
            }
        }

        function Fruit(name,age) {
            
            this.name = name;
            this.age = age;
            this.fav = function() {
                alert(this.name);
            }
        }
        var p1 = new Person('firster',17);
        var f1 = new Fruit("Tom",19);
        console.log(p1 instanceof Object);
        console.log(f1 instanceof Object);
        console.log(p1 instanceof Person);
        console.log(f1 instanceof Fruit);

 

  4 . 原型模式创建对象             

function Student() {
    this.name = 'easy';
    this.age = 20;
}

// Student.prototype 是Student的父类
// 原型指  prototype

Student.prototype.alertName = function(){
     //this 指 student
    alert(this.name);
};

var stu1 = new Student();
var stu2 = new Student();

stu1.alertName();  //easy
stu2.alertName();  //easy

alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数

 

posted on 2018-09-27 19:56  二十四桥_明月夜  阅读(168)  评论(0编辑  收藏  举报

导航