javascript面向對象

• 創建對象的方法
• 一、創建對象的方法
• • • 1、普通的創建方法
    • 2、工廠函數
    • 2、構造函數
    • 2、原型模式(prototyppe)
    • 5、構造函數和原型組合模式(比較常見創建對象的方法)
    • 二、匿名函數匿名函數(沒有函數名字的函數)
    • 三、閉包
    • • 案例
      • 閉包中的this
    • 四、繼承
    • 1、繼承幾種通用的方法
    • • • 1）對象冒充(構造函數綁定) apply call 可以多個繼承
        • 2) 原型鏈繼承
        • 3）混合模式(構造函數+原型)
    • 五、cookit
    • 六、JSON
    • 1、基本用法
    • 2、高階用法

創建對象的方法

---

一、創建對象的方法

1、普通的創建方法

new Object()// 使用系統構造函數(構造器)let obj = { // 字面量name: "蒙婭",sex: "20",hero: function () {console.log(`王者英雄${this.name}`)}}obj.hero()

2、工廠函數

function createdfn(name, sex) {let obj = new Object();//或者使用 let obj={}obj.name = nameobj.sex = sexobj.hero = function () {console.log(`王者榮耀${name}`)}return obj}console.log(createdfn('劉備', 40))createdfn('關羽', 50).hero()console.log(createdfn('關羽', 50).hero === createdfn('劉備', 40).hero) // false 缺點造成內存的浪費

2、構造函數

1）構造函數是用new 來調用的，
2）所謂的構造函數，就是專門生成 "對象"的函數 ，提供模板，作為對象的基本結構
3）構造函數內部使用了this變量，對構造函數new運算符, 就能生成實力，并且this變量會綁定再實例對象上
4）instanceof 方法可以驗證原型對象與實例之間的關系

function fun() {return this}console.log(fun()) // windowconsole.log(new fun()) // fun {} 構造函數的this指向的當前實例function Constructor(name, sex) {this.name = 'name'this.sex = sexthis.hero = function () {console.log(`我是狗腿子${name}`)}}console.log(new Constructor('西門慶', '18'))console.log(new Constructor('西門慶', '18').hero() == new Constructor('潘金蓮', '18').hero()) //trueconsole.log(new Constructor('西門慶', '18') instanceof Constructor) // true let objUser = {}// Constructor.apply(objUser,['武松',50])Constructor.call(objUser, '武松', 50)console.log(objUser) //{name: "name", sex: 50, hero: ?}console.log(new Constructor('西門慶', '18')) == new Constructor('潘金蓮', '18') //false 兩個對象的實例地址是不同的,說明兩個對象占用了兩個空間的內存，跟工廠函數有一個缺陷

2、原型模式(prototyppe)

// function Prototypes(name, sex) {// Prototypes.prototype.name = name// Prototypes.prototype.sex = sex// Prototypes.prototype.hero = function () {// console.log(`我是狗腿子${name}`)// }// }// Prototypes簡化版本function Prototypes(name, sex) {Prototypes.prototype = {constructor:Prototypes, name: name,sex: sex,hero: function () {console.log(`我是狗腿子${name}`)}}}console.log(new Prototypes('呂布', 35),'******')console.log(new Prototypes('呂布', 35).name === new Prototypes('潘鳳', 35).name) // true 說明都是引用同一個地址 同一個內存地址 prototype對象// 1) prototype 模式驗證方法// 1.isPrototypeOf) 這個法用來判斷，某個proptotype對象和某個實例之間的關系。// 2.hasOwnProperty（）每個實例對象都有一個hasOwnProperty）方法，用來判斷某一個屬性到底是本地屬性，還是繼承自prototype對象的屬性。// 3.in運算符in運算符可以用來判斷，某個實例是否含有某個屬性，不管是不是本地屬性。in運算符還可以用來遍歷某個色的所有屬性。let a = new Prototypes('呂布', 35)console.log(Prototypes.prototype.isPrototypeOf(a)) // true a是原型創建的對象console.log(a.hasOwnProperty('name')) //falseconsole.log("name" in a) //true alert(a.constructor)

5、構造函數和原型組合模式(比較常見創建對象的方法)

function Parsent(name,hobby){this.name=name;this.hobby=hobby;}Parsent.prototype={run:function(){alert(`${this.name}在${this.hobby}`)}}let bb =new Parsent('瀾',['打龍','推塔'])let cc =new Parsent('伽羅',['打龍','推塔'])bb.run()cc.run()

二、匿名函數匿名函數(沒有函數名字的函數)

//普通函數function myFn() {console.log('我是普通函數')}let fn2 = function () {console.log('我是匿名函數')}fn2();//匿名函數自調用(function (name) {alert(`我是匿名函數自調用${name}`)})('hello')

三、閉包

1.常見的方式是在函數內部創建另一個函數
2.閉包的第一個用途：通過閉包可以訪問局部變量
3.閉包的第二個用途：可以讓這些變量的值始終保持在內存中
4.優點：可以把局部變量駐留在內存中，可以避免使用全局變量；全局變量在復雜程序中會造成許多麻煩（比如命名沖突，垃圾回收等），所以推薦使用私有的，封裝的局部變量。而閉包可以實現這一點。
5.缺點：由于閉包里作用域返回的局部變量資源不會被立刻銷回收，所以可能會占用更多的內存：所以過度使用閉包會導致性能下降；

// 常見寫法function fn1() {let name = '我是局部變量'return function () {console.log(name)}}fn1()()// 使用閉包實現累加 function gun() {let a = 100;return function () {alert(a++)}}1、調用方法一// gun()(); gun()(); gun()() //100 這種方法調用每次都會初始化 a變量2、調用方法二//let f = gun() //這只會執行一次，后面調用都是執行內部的匿名函數f(); //101f(); //102f(); //103// f() = null //應及時 解除引用，否則占用更過內存

案例

// 循環中的匿名函數let arr = []function nice() {for (var i = 0; i < 5; i++) {arr[i] = function () {return `元素${i++}`}}return arr}console.log(nice()[0](), nice()[1](), nice()[2](), nice()[3]()) //5 5 5 5 let arr1 = []function nice1() {for (var i = 0; i < 5; i++) {arr1[i] = (function () {return `元素${i}`})()}return arr1}console.log(nice1()[0], nice1()[1], nice1()[2], nice1()[3])//0 1 2 3

閉包中的this

可以使用對象冒充強制改變this的指向
將this賦值給一個變量，閉包訪問這個變量

//閉包中的thisvar type = '輔助'let colsure = {name: "關羽",type: "坦克",run: function () {console.log(this.name)},hero: function () {var that = thisreturn function () {return `我是${this.type}`// return `我是${that.type}` // 使用this 賦值改變this}}}colsure.run() // 關羽 this指向當前對象colsure console.log(colsure.hero()()) // 我是輔助 // ·匿名函數的執行環境具有全局性，this通常是指向window的。// 可以使用對象冒充強制改變this的指向// 將this賦值給一個變量，閉包訪問這個變量console.log(colsure.hero().call(colsure), '使用call改變this指向') //我是坦克// 模仿塊級作用域for (var m = 0; m < 5; m++) { };console.log(m, '變量m');(function () {for (var K = 0; K < 5; K++) {console.log(K)}})()// console.log(K) //erro

四、繼承

1、繼承幾種通用的方法

1）對象冒充(構造函數綁定) apply call 可以多個繼承

function parsent(name) {this.name = namethis.sun = function () {return `我是裝逼王${this.name}`}}function parsenttwo() {this.HP = '10000'}function Son(name) {// parsent.call(this, name)parsent.apply(this, [name])parsenttwo.call(this)console.log(this)this.tick = '萌王'}let getvalue = new Son('龍傲天')console.log(getvalue.name)getvalue.sun()

2) 原型鏈繼承

function PrototypeData() {this.tile = "我是需要被繼承的數據"PrototypeData.prototype.runs = function () { console.log('我是原型繼承')}}function inherit() { }//inherit 現在的prototype指向的是PrototypeData的實例,inherit的prototype被繼承// 注意：原型繼承不能繼承多個類 ，后續新加入的類需要繼承之后添加inherit.prototype = new PrototypeData()inherit.prototype.name = "在繼承之后添加屬性值"let result = new inherit()console.log(result)result.runs()

3）混合模式(構造函數+原型)

function fn1(name) {this.type = '動畫',this.hero = function () {console.log(`我是${name}變成迪迦`)}}fn1.prototype = {activer: function () {console.log('我是混合模式的繼承')},sex: "20000"}function Fn2(name) {fn1.call(this, name)}Fn2.prototype = new fn1()let result2 = new Fn2('大古')console.log(result2.type)result2.hero()result2.activer()

五、cookit

什么是cookit? cookie是存儲于訪問者的計算機中的變量。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發送這個 cookie。當用戶下一次訪問同一個頁面時，服務器會先查看有沒有上傳留下的cookie資料，如果有就更根據 cookie里的資料判斷訪問者，發送特定的頁面內容.常見應用場景：自動登錄，記住用戶名..… 最初是用來在客戶端和服務器端進行通信使用的，所以原則上應該在服務器運行環境下進行。目前大部分瀏 覽器可以在客戶端生成和讀取cookie數據(chrome不可以在客戶端操作） 基本用法document.cookit("name=我是Cookit協議")alert(document.cookit)//使用encodeURIComponent 編碼 decodeURIComponent //解碼

cookie可選參數:
expires = 時間：過期時間默認值為瀏覽器關閉后過期（即會話結束后）將expires設置為過去的時間可以刪除cookie
path: 他指定了與cookie關聯在一起的網頁。默認值是在和當前網頁同一目錄的網頁中有效。如果把path 設置為’/'那 么它對該網站的所有網頁可見
domain: 設定cookie的有效域名，一般使用默認值，即綁定當前域名，本地測試無效
secure: 指定了網絡上如何傳輸cookie.默認為普通http協議傳輸；若設置為安全的，將只能通過https安全協議才可以傳輸。

// cookit 函數封裝//1、普通創建cookit,太多而繁瑣document.cookit = 'name=劉備'documen.cookit = 'hero=刺客'//2、函數function setCookit(key, values, expires, path) {var times = new Date()times.setDate(times.getDate() + expires) //設置多少天后過去documen.cookit = `${key}=${value};expires=${times};path=${path}`}// setCookit('sex', '男', 10, '\/')// 注意：cookie的限制：// ·數量（20 - 50，不同瀏覽器有差異），大小有限（4k）// ·有些數據不適合使用cookie保存，比如銀行卡號等重要的信息

六、JSON

1、基本用法

// JSON.parse:解析// JSON.stringify:序列化let jsonValue = '{"name":"我是大哥大","hero":"楊戩","expires":"單詞","domain":"hello"}'let jsonObj=JSON.pase(jsonValue )JSON.Stringify(jsonObj)

2、高階用法

SON.parse高階用法,參數二(選填):function
JSON.stringify高階用法,參數二:[]或者function用法 參數三:number類型(key值空格縮進),字符串(key前面添加字符串)

// JSON.parse高階用法,參數二(選填)let setJson = JSON.parse(jsonValue, function (key, value) {if (key != 'domain') {return value}})console.log(setJson) //{name: "我是大哥大", hero: "楊戩", expires: "單詞"}// JSON.stringify高階用法,參數二:[]或者function用法 參數三:number類型(key值空格縮進),字符串(key前面添加字符串)let jsonObj = { "name": "我是大哥大", "hero": "楊戩", "expires": "單詞", "domain": "hello" }let setStringify = JSON.stringify(jsonObj, ['name', 'expires'])console.log(setStringify) //'{"name":"我是大哥大","expires":"單詞"}'let setvalues = JSON.stringify(jsonObj, function (key, value) {if (key != 'domain') {return value}}, '20')console.log(setvalues) //'{"name":"我是大哥大","hero":"楊戩","expires":"單詞"}'// {// 20"name": "我是大哥大",// 20"hero": "楊戩",// 20"expires": "單詞"// }

總結

以上是生活随笔為你收集整理的前端基础小记02的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。