面向對象

面向對象

編程思想:編程

1.面向過程編程(OPP/POP) Oriented Procedure Programming:以事件爲中心設計模式

2.面向對象編程(OOP)Object Oriented Programming :以事物爲中心函數

(1)要經過分析出來的事物的公共的特徵和行爲,去建立對應的類(class)this

(2)經過類(class),去建立對應的對象(object)spa

類:類是具備相同特徵和行爲的事物的抽象,相似於模板

對象:對象是類的實例,是由類創造出來的

JS裏是沒有類的,可是有一個功能與類類似的東西---函數prototype

這個函數有一個專門的名字---構造函數
構造函數看起來有兩個最大的特色:

1.名字首字母大寫

2.調用的時候須要new關鍵字配合

JS建立對象的兩種方式:

1.字面量(語法糖)建立對象
語法:var obj = {
            屬性名1:屬性值1,
            屬性名2:屬性值2,
            ...
            方法名1:匿名函數1,
            方法名2:匿名函數2,
            ...
};

如何操做一個函數:設計

點語法:既可設置,也能夠獲取對象的屬性對象

對象.屬性名blog

例子:建立一個學生對象,屬性包括:姓名,年齡,性別,學校,專業;方法包括:上課,考試,作做業,函數裏只須要輸出一行log便可
        var stuObj = {
        //屬性
        name = '張三'
        age = '18',
        sex = '女'
        school = '鄭州大學'
        專業:'計算機科學與技術'
        friend:{
              name:'李四'
              age:'25',
              sex:'男'
              hobby:['登山''蹦極']
        },
        //方法
        shangke:function(){console.log("上課"); },
        kaoshi:function(){console.log("考試");},
        homework:function(){console.log("作做業");},
        intruduce:function(){
            //在對象方法裏的this,代指的就是方法所屬的對象
            console.log(`你好,我叫${this.name},年齡是${this.age},學校爲${this.school}`);
        }
        }
        console.log(stuObj);
        stuObj.intruduce();//此時的this表明的是stuObj
        console.log(stuObj.shangke());//上課   undefine
        //打印的是‘stuObj.shangke()’的返回值,而這個方法沒有返回值,因此他會先打印‘上課’,而後再打印undefine
       
          var abc = stuObj.introduce;//此時abc爲introduce的函數體
          abc();//window.abc();此時的this指向的是window

//工廠模式建立對象 設計模式繼承

function creatStu(name,stu,sex){
   var stu = {
       name:name,
       age:age,
       sex:sex,
       sayHi:function(){
           console.log(`你好,我叫${this.name},年齡${this.age},性別是${this.sex}.`);
      }
  }
   return stu;
}
 var stu1 = creatStu("張三",20,"男");
 var stu2 = creatStu("李四",25,"女");
 var stu3 = creatStu("王五",27,"男");
 stu1.sayHi();//你好,我叫張三,我今年20,性別是男
 stu1.sayHi();//你好,我叫李四,我今年23,性別是女
 stu1.sayHi();//你好,我叫王五,我今年20,性別是人妖
2.構造函數建立對象
function Student(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
var stu1 = new Student("張三",20,"男");
console.log(stu1);

JS面向對象裏的重要概念

function Person(name,age,sex,nation,sayHi){
this.name = name;
this.age = age;
this.sex = sex;
}

1.原型對象(prototype) ***

(1)原型對象是一個對象,它屬於構造函數,JS會爲每個構造函數內置一個原型對象,能夠經過語法:

         函數名.prototype

(2)由於原型對象是對象,因此能夠分爲爲其新增屬性或者方法,給原型對象新增的屬性或者方法,能被所屬的構造函數建立的任何一個實例對象所共同擁有

//爲上面構造函數新增nation屬性和sayHi方法
Person.prototype.nation = "中國"
Person.prototype.sayHi = function(){
   console.log(`你好,我叫${this.name},年齡爲${this.age},性別爲${this.sex}.`);
}
var p1 = new Person("張三",20,"男");
console.log(p1);//打印的是一個對象
console.log(p1.nation);//中國
p1.sayHi();//你好,我叫張三,今年20.

2.constructor屬性 *

constructor屬性屬於原型對象,任何一個原型對象都有一個constructor屬性,該屬性指向原型對象所屬的構造函數

console.log(Person.prototype.constructor);
   //由上圖可知:打印的爲Person這個構造函數

3. _ proto _ 屬性 **

_ proto _ 屬性,該屬性屬於實例對象,指向實例對象所屬的構造函數的原型對象

console.log(p1._proto_);//打印的是nation屬性和sayHi方法

4.原型鏈 ***

JS查找對象屬性的順序:
1.首先在當前實例對象裏查找是否對應存在對應屬性,若是有,直接獲取返回便可
2.若是實例對象裏沒有該屬性,系統不會中止查找,會接着去當前實例實力對象所屬的構造函數的原型對象裏繼續尋找是否存在該屬性,若是有,獲取返回
3.若是當前構造函數所屬的原型對象裏也沒有該屬性,系統還不會中止查找,回去當前實例對象的構造函數的原型對象所屬的構造函數的原型對象裏繼續查找
4.直到找到Object構造函數的原型對象中止查找若是此時尚未找到該屬性,屬性返回undefined,方法調用也會報錯

這種查找對象屬性或者方法造成的順序,咱們稱之爲"原型鏈"!!!

原型鏈的應用 :繼承 **

相關文章
相關標籤/搜索