js面向對象

正所謂萬物皆對象,面向對象也是很多編程語言里常談的問題,接下來我們來了解一下js的面向對象。

一、定義對象的三種方式

// 第一種:
var obj1 = {
        name:"李四",
        age:19,     
        };
// 第二種;
var obj2 = new Object();
obj2.name = "張三";
obj2.age = "20";
// 第三種;
var obj3 = Object.create({name:"張三",age:20});

二、對象的傳址

  1. 對象的傳址:對象賦值相同的內存地址;
    舉個例子:改變arr2[1]的值,arr[1]也會隨之改變,這樣就得不到我們預期的效果了。
var arr = [1,2,3,4,5];
        var arr2 = arr;
    arr2[1] = 6;
        console.log(arr);
  1. 深拷貝:解決傳址問題
    把對象使用JSON.stringify方法轉變成json格式數據 ,然后在使用JSON.parse解析json字符串,這個看起來在做一些浪費時間的事情,但數據經過這樣轉變后,改變arr2的值,不會影響到arr的值。
var arr2 = JSON.parse(JSON.stringify(arr));

三、工廠模式

工廠模式:使用函數封裝一個創建對象的接口,實例化對象。用于解決變量的污染。下面例子是工廠模式的一般寫法;

function Factory(height){
            // obj人類;
        var obj = {};
            obj.name = "小明";
            obj.height = height;
            obj.age = 20;
            obj.hobby = function(){
                console.log("我喜歡籃球");
            }
            return obj;
        }
        var newFactory = Factory("180cm");
        console.log(newFactory.height);
        newFactory.hobby();

四、構造函數

  1. 構造函數類似于類的概念,在es6還沒之前,都是使用構造函數,它與類相似,首字母大寫(約定俗成的).

構造函數的原型:
對象是由自身和原型共同構成的;對象的原型是proto
構造函數是由自身和原型共同構成的;構造函數的原型prototype
屬性寫在構造函數里;方法寫在原型上;

// 定義構造函數 (this)
        function Car(style1,color){
            // obj.type = type;
            this.type = style1;
            this.color = color;
            this.action = function(){
                console.log("跑");
            }
        }
  1. 調用構造函數
// 實例化 關鍵字:new(把抽象類具體化,把類變成對象);
        var car1 = new Car("寶馬","紅色");
        console.log(car1.type);
        car1.action();
  1. new 關鍵字 的作用
  • 創建了空的對象;
        var obj = {};
  • 改變this指向;
        Car.call(obj,"寶馬","白色");
        console.log(obj.type);
  • 賦值原型;
    若使用(obj._proto_ = Car.prototype;)肯定是不合理的,會存在上面所說的傳址問題,這時候我們需要引入一個中間構造函數。
 // 解決傳址問題 借助中間構造函數
         function Link(){}
         Link.prototype = Person.prototype;
         // 子級原型賦值一個空的(只有原型的)實例化對象,子級改變不影響父級
        Car.prototype = new Link();

4.構造函數的公有和私有以及繼承

  • 公有屬性和私有屬性
    在js中沒有public,private,protent三個關鍵字來定義成員的訪問權限,只能模擬公有屬性和私有屬性。使用 var\let定義的是私有屬性;使用this關鍵字的是公有屬性
function Person(name){
            // 私有屬性;
            var name = name;
            // 公有屬性;
            this.height = "178cm";
            // get方法:通過公有方法訪問私有屬性
            this.get = function(){
                return name;
            }
            // set方法:設置私有屬性的
            this.set = function(newName){
                name = newName;
                console.log(name);
            }
        }
  • 繼承
    由于沒有extends,使用call、apply、bind函數改變this指向從而達到想要的繼承效果。
        function Dad(height){
            this.name = "張三";
            this.age = 50;
            this.height = height;
            this.money = "$1000000000";
            this.hobby = function(){
                console.log("喜歡太極");
            }
         }
         function Son(height){
            Dad.call(this,height);
            this.action = function(){
                console.log("玩");
            }
         }
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、面向過程和面向對象的區別、聯系 1.面向過程編程:注重解決問題的步驟,分析問題需要的每一步,實現函數依次調用。...
    空谷悠閱讀 906評論 1 11
  • title: js面向對象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618閱讀 580評論 0 2
  • 1、對于變量之間的傳址和傳值(1)變量之間的傳值只會將值賦給另一個辦理而不會相互影響 (2)但是復雜的數據類型會在...
    2dcc2b155e1e閱讀 544評論 1 1
  • 1.JS對象創建的三種方式 1.第一種形式 工廠模型 function Person(){}// 添加原型屬性Pe...
    呦釋原點閱讀 485評論 0 8
  • 小美家這邊,小美爸爸在朋友家喝得大醉,已經在別家睡下了。小美母親本是去送點菜的,遇見鄰居家做月餅,遂被邀請...
    半秋伴夏閱讀 401評論 0 0