js原型,對象,面向對象,構造函數

單例模式和工廠模式

	單例模式   把描述同一個事物特徵的信息進行分組歸類,放到同一個命名空間下(減少全局變量的污染)
		 var name  = 'erya';
         var age = 18;

         var name = 'jinyu';
         var age = 23;
         console.log(name)//jinyu
    
         let person1 = {
            name:'jinyu',
             age:18
         }
         let person2 = {
             name : 'erya',
             age : 22
         }
         console.log(person1)//{name: "jinyu", age: 18}
	高級單列模式
let person1 = (function(){
            let fn = function(){};
            let name = 'erya';
            return{
                name:name,
                age:18,
                fn:fn
            }
        })()
        console.log(person1)//{name: "erya", age: 18, fn: ƒ}

        let person2 = (function(){
            let fn = function(){};
            let name = 'jinyu'
            let age = 23
            return{
                name:name,
                age:age,
                fn:fn
            }
        })()
        console.log(person2)//{name: "jinyu", age: 23, fn: ƒ}
	工廠模式
       	   如果用單例模式去寫很多個person就會變得很麻煩,就有了工廠模式
           特點:批量生產  把實現相同功能的代碼封裝到函數裏,以後想運行這個方法,就直接執行這個函數就好了
      	   高內聚:提高代碼的複用率
      	   低藕合:減少頁面的重複代碼
 function createPerson(name,age){
                var name = name;
                var age = age;
                var sex = 'girl'
                return{
                    name,
                    age,
                    sex
                }
            }
            let person1 = createPerson('erya',18)
            let person2 = createPerson('jinyu',18)
            console.log(person1,person2)//{name: "erya", age: 18, sex: "girl"} {name: "jinyu", age: 18, sex: "girl"}

面向對象

 		標記語言:HTML / CSS3
        編程語言:JavaScript,PHP,C....
        面向過程:C
        面向對象:


    把抽象得對象按照特點進行分類(大類 / 小類),把類的公共特徵進行提取和封裝,放到對應的類別中
    類就是對對象的一種細分,和公共部分的抽取
    在類中具體派生出來的具體事物就是類的實例,而且實例擁有自己私有的特徵,還擁有所屬類上的特徵
    我們研究面向對象,其實就是研究對象、類、實例之間的關係和各自的知識點

    我們研究一個實例:(1)研究實例的私有屬性(2)研究實例的所屬類的共有屬性(3)一層一層找類的屬性和方法

在這裏插入圖片描述

構造函數

new操作符
  把new放在函數前面,函數執行
      	1.在代碼執行之前,函數中會首先創建一個空對象
        2.讓當前函數this指向這個空對象
        3.當代碼執行完成後,會默認返回this
	 new後面的函數就是構造函數 也叫類;那麼通過構造函數獲取的返回值就是叫							
	 	實例,實例是構造函數new出來的
構造函數
		• let f = Fn()  //普通的函數執行
		• let f = new Fn()  //構造函數運行模式,此時的Fn就是Fn類(構造函數),函數執行之後的返回結果就是一個對象,叫做實例對象(f就是Fn的實例)
		• 執行原理:
		ⅰ. 默認生成一個空對象 {}
		ⅱ. 讓函數裏的this指向這個對象,也就是指向這個類的實例
		ⅲ. 代碼執行
		ⅳ. 默認return 這個對象
		• 類就是函數數據類型的
		• 實例就是對象數據類型的
		• 構造函數中的this指向當前實例
			1.js爲了區分構造函數和普通函數,一般將構造函數首字母大寫
		  	2.構造函數this指向當前實例
		    3. 構造函數:形成私有作用域->形參賦值->變量提升->創建一個空對象,並且讓當前作用域this指向這個對象->代碼從上到下執行->返回this->作用域是否銷燬
		    4.instanceof 數據類型檢測   檢測當前實例是否屬於某個類;如果是返回true,不是返回false
		    5.內置類: Number  String  Boolean  Null Undefined   Object  Array RegExp  Date...
		    6.類一定是函數,函數不一定是類 
構造函數普通函數區別
	1. 運行上的不同
		• 普通函數-->形成私有作用域-->形參賦值-->變量提升-->代碼執行-->作用域是否銷燬
		• 構造函數-->形成私有作用域-->形參賦值-->變量提升-->默認生成一個對象-->把this指向這對象-->代碼執行-->默認把這個對象return出去-->作用域是否銷燬
	2. 執行上的不同
		• 構造函數如果不傳實參,可以不加小括號
	3. return的不同
			• 構造函數如果手動return一個基本數據值,不能過改變人家的返回值,但是手動return引用數據類型,可以改變構造函數的返回值,此時return的東西已經不是當前類的實例了
	 console.log(Number);//ƒ Number() { [native code] }
    console.log(Array);//ƒ Array() { [native code] }
    console.log(String);//ƒ String() { [native code] }
    console.log(Object);//ƒ Object() { [native code] }
    console.log(Function);//ƒ Function() { [native code] }
    console.log(Boolean);//ƒ Boolean() { [native code] }
    console.log(Date);//ƒ Date() { [native code] }
    console.log(RegExp)//ƒ RegExp() { [native code] }

    //console.log(Null)  //特殊的2個 也是內之類  瀏覽器限制調用
    //console.log(Undefined)//
    console.log(new Number(1) == 1)//true  
    console.log(new Number(1) === 1)//false    默認有一個 primitiveValue  

    console.log(Math)//Math {abs: ƒ, acos: ƒ, acosh: ƒ, asin: ƒ, asinh: ƒ, …}  對象 特殊的

    var obj = {};
    console.log(obj instanceof Object)//true
    var arr = [];
    console.log(arr instanceof Array)//true
    console.log(obj instanceof Array)//false
    
    //var num = 10;
    //num.substring(0,1)//報錯  substring不是Number上的方法
    let a ="0x12"
    console.log(parseInt(a))

    function Gn(){}
    function Fn(){
        console.log(100);  //100
        this.x=x;
        this.y = y;
        this.getX = function(){
            console.log(this.x)
        }
    }
    //new fn//如果這個函數需要參數,那麼這個需要小括號   如果不需要參數, 那麼小括號可以省略
    var f = new Fn;//這是小f叫實例   new後面的函數就是構造函數 也叫類
    Fn()        
    console.log(f);//Fn {}
    console.log(f instanceof Fn)//true
    console.log(f instanceof Gn)//false

原型

	• 構造函數,解決了實例的私有屬性問題
	• 原型模式,解決了實例的共有屬性問題
	• 類就是函數數據類型的
	• 實例就是對象數據類型的
	• 構造函數中的this指向當前實例
		• 每一個函數(普通函數、構造函數)都天生自帶一個prototype屬性,屬性值是一個對象,它裏面儲存的是實例的共有屬性(原型)
		• 每一個原型都天生自帶一個constructor屬性,其屬性值指向當前類
		• 每一個對象(實例,原型)都天生自帶一個__proto__屬性,其屬性值指向當前所屬類的原型

在這裏插入圖片描述

原型鏈

		原型鏈 :當獲取對象屬性名對應的屬性名,先找自己的私有屬性,如果私有屬性不存在,會默認通過__proto__繼續向上查找,如果上一級還沒,就繼續通過__proto__往上查找 查找到Object原型爲止,如果還沒有 爲undefined,這種方式就叫原型鏈
    	對象優先找到Object基類
```javascript
 function Fn(a,b){
            this.x = a;
            this.y = b;
            this.getX = function(){
                console.log(1);
                
            }
            Fn.prototype.getX = function(){
                console.log(2);
                
            }

        }
        var f = new Fn(100,200)
        console.log(f.getX);//f(){}
        console.log(f.hasOwnProperty);//ƒ hasOwnProperty() { [native code] }

        console.log(Fn.prototype instanceof Object); //true
         
        var obj = {num:1}
        console.log(typeof obj.num);//number    //obj.num= 1
        
        console.log(Object.prototype);
        console.log(f.hasOwn);//找不到爲undefined
        console.log(f.__proto__.__proto__
        .__proto__);//null
        
      

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章