JS 中的面向對象

時間 2019-11-17

標籤面向對象欄目 JavaScript 简体版

原文原文鏈接

建立對象的集中常見方式

　　1 . 使用 Object 或對象字面量建立對象app

　　2 . 工廠模式建立對象函數

　　3 . 構造函數模式建立對象ui

　　4 . 原型模式建立對象　　this

　　1 . 使用 Object 或對象字面量建立對象

JS 中基本建立對象的方式 : spa

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

使用字面量方式建立對象 : prototype

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

可是有個問題,當咱們要建立同類的student1 , student2 .......,代碼會重複.因此就有了工廠模式code

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

可是這個也有問題就是不知道出來的數據是哪一個類型的.blog

　　好比說咱們有定義了個"水果的類型" 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");

對於以上代碼建立的對象v一、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 兩者共享同一函數