js高級之面向?qū)ο螅ㄒ唬?/h2>

對象的定義:

JS中一切皆為對象,這是一句常說的話。了解JS對象,從這句話開始吧。JS中的基本數(shù)據(jù)類型如number,bool,字符串,數(shù)組,null,undefined等等都是對象。

對象的本質(zhì):

帶有屬性和方法的特殊數(shù)據(jù)類型,而每個屬性或者方法又可看做是一個鍵值對,因此可以這樣定義:對象是一系列無序鍵值對的集合

js中有兩種對象

  • 系統(tǒng)的內(nèi)置對象:比如說,string Date Array

  • 自己創(chuàng)建的對象

聲明對象或者創(chuàng)建對象的方式

//第一種方式
 var obj = {name:"張三",age:20};
//第二種方式
var obj  = new Object();
obj.name = "張三";
obj.age = 20;
//第三種方式
var obj = Object.create({name:"張三",age:20});

對象中不僅可以定義屬性,還可以定義方法

var obj = {
  name:"二哈",
  age:5,
  behaivor:function(){
    console.log("吃飯睡覺");
  }
}
//調(diào)用屬性和方法
console.log(obj.name);
obj.behavior();

設(shè)計模式之工廠模式

什么是工廠模式: 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式。 簡單的工廠模式可以理解為解決多個相似的問題;這也是她的優(yōu)點;

比如定義一個狗類

function Dog(name,age,sex){
  var obj = {};
    obj.name = name;
    obj.age  =age;
    obj.sex = sex;
    obj.sayName = function(){
        return this.name;
    }
  return obj;
}
var dog1 = new Dog("大黃",10,"公");
console.log(dog1.name);//大黃
console.log(dog1.age);//10
console.log(dog.sayName());//大黃

上面的代碼,Dog函數(shù)能接受三個參數(shù),可以無數(shù)次調(diào)用這個函數(shù),每一次返回的都是包含三個屬性和一個方法的對象;

工廠模式是為了解決多個類似對象聲明的問題;也就是為了解決實列化對象產(chǎn)生重復(fù)的問題。

構(gòu)造函數(shù)

構(gòu)造函數(shù)就是初始化一個實例對象,對象的prototype屬性是繼承一個實例對象。

構(gòu)造函數(shù)的注意事項:

  • 默認函數(shù)首字母大寫

  • 構(gòu)造函數(shù)并沒有顯示返回任何東西。new 操作符會自動創(chuàng)建給定的類型并返回他們,當(dāng)調(diào)用構(gòu)造函數(shù)時,new會自動創(chuàng)建this對象,且類型就是構(gòu)造函數(shù)類型。

  • 也可以在構(gòu)造函數(shù)中顯示調(diào)用return.如果返回的值是一個對象,它會代替新創(chuàng)建的對象實例返回。如果返回的值是一個原始類型,它會被忽略,新創(chuàng)建的實例會被返回。

也就是說:

 function Person (name){
  this.name = name;
}
var newPerson = new Person("JS");

等價于

function person(name){
  Object obj = new Object();
  obj.name = name;
  return obj;
}
var newPerson = person("JS");

構(gòu)造函數(shù)的定義:屬性定義在函數(shù)里面,方法定義在原型中。
構(gòu)造函數(shù)包括構(gòu)造函數(shù)本身和它的原型

function Person(name,age,height){           
                 this.name = name;
        this.age = age;
        this.height = height;
}       
  Person.prototype.hobby = function(){
            console.log("喜歡籃球");
        }
        Person.prototype.action = function(){
            //this指向的是實例化的對象            
                        console.log("姓名是"+this.name+"年齡是"+this.age);
        }
        var zhangsan = new Person("張三",18,"189cm");
        zhangsan.action();

通過構(gòu)造函數(shù)找到原型:prototype;
通過原型找到構(gòu)造函數(shù):constructor;

構(gòu)造函數(shù)的公有和私有

function Person(name){
    //私有屬性
    var name = name;
    //公有屬性
    this.height = "189cm";
    //get方法:通過共有方法訪問私有屬性
    this.get = function(){
        return name;
    }
    //set方法:設(shè)置私有屬性
    this.set = function(newName){
        name = newName;
        console.log(name);
    }
}
var newPerson = new Person("張三");
console.log(newPerson.name);//undefined
console.log(newPerson.get());
newPerson.set("李四");

構(gòu)造函數(shù)的繼承

function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype = function(){
  console.log("haha");
 }
//繼承屬性
function Student(name,age){
  Person.call(this,name,age);
}
//繼承原型
//會涉及到傳址的問題,所以要找第三者
function Link(){}
Link.prototype = Person.prototype;
Student.prototype = new Link();

class Person{
  //類最開始的時候加載執(zhí)行
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  hobby(){
   console.log("吃飯睡覺打豆豆");
  }
}
//類的調(diào)用
var zhangsan = new Person("張三",28);
console.log(zhangsan.name);
zhangsan.hobby();
//類的繼承
class Student extends Person{
  constructor(name,age){
    super(name,age);
  }
  action(){
    console.log("我是action函數(shù)");
  }
}
var newStudent = new Student("李四",10);
console.log(newStudent.name);
newStudent.hobby();
newStudent.action();
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容