javascript面向?qū)ο?/h3>

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

創(chuàng)建對象的方法

---

一、創(chuàng)建對象的方法

1、普通的創(chuàng)建方法

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

2、工廠函數(shù)

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('關(guān)羽', 50).hero()console.log(createdfn('關(guān)羽', 50).hero === createdfn('劉備', 40).hero) // false 缺點造成內(nèi)存的浪費

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

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

function fun() {return this}console.log(fun()) // windowconsole.log(new fun()) // fun {} 構(gòu)造函數(shù)的this指向的當(dāng)前實例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 兩個對象的實例地址是不同的,說明兩個對象占用了兩個空間的內(nèi)存，跟工廠函數(shù)有一個缺陷

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 說明都是引用同一個地址 同一個內(nèi)存地址 prototype對象// 1) prototype 模式驗證方法// 1.isPrototypeOf) 這個法用來判斷，某個proptotype對象和某個實例之間的關(guān)系。// 2.hasOwnProperty（）每個實例對象都有一個hasOwnProperty）方法，用來判斷某一個屬性到底是本地屬性，還是繼承自prototype對象的屬性。// 3.in運算符in運算符可以用來判斷，某個實例是否含有某個屬性，不管是不是本地屬性。in運算符還可以用來遍歷某個色的所有屬性。let a = new Prototypes('呂布', 35)console.log(Prototypes.prototype.isPrototypeOf(a)) // true a是原型創(chuàng)建的對象console.log(a.hasOwnProperty('name')) //falseconsole.log("name" in a) //true alert(a.constructor)

5、構(gòu)造函數(shù)和原型組合模式(比較常見創(chuàng)建對象的方法)

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()

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

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

三、閉包

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

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

案例

// 循環(huán)中的匿名函數(shù)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: "關(guān)羽",type: "坦克",run: function () {console.log(this.name)},hero: function () {var that = thisreturn function () {return `我是${this.type}`// return `我是${that.type}` // 使用this 賦值改變this}}}colsure.run() // 關(guān)羽 this指向當(dāng)前對象colsure console.log(colsure.hero()()) // 我是輔助 // ·匿名函數(shù)的執(zhí)行環(huán)境具有全局性，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）對象冒充(構(gòu)造函數(shù)綁定) 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 = "我是需要被繼承的數(shù)據(jù)"PrototypeData.prototype.runs = function () { console.log('我是原型繼承')}}function inherit() { }//inherit 現(xiàn)在的prototype指向的是PrototypeData的實例,inherit的prototype被繼承// 注意：原型繼承不能繼承多個類 ，后續(xù)新加入的類需要繼承之后添加inherit.prototype = new PrototypeData()inherit.prototype.name = "在繼承之后添加屬性值"let result = new inherit()console.log(result)result.runs()

3）混合模式(構(gòu)造函數(shù)+原型)

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

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

// cookit 函數(shù)封裝//1、普通創(chuàng)建cookit,太多而繁瑣document.cookit = 'name=劉備'documen.cookit = 'hero=刺客'//2、函數(shù)function setCookit(key, values, expires, path) {var times = new Date()times.setDate(times.getDate() + expires) //設(shè)置多少天后過去documen.cookit = `${key}=${value};expires=${times};path=${path}`}// setCookit('sex', '男', 10, '\/')// 注意：cookie的限制：// ·數(shù)量（20 - 50，不同瀏覽器有差異），大小有限（4k）// ·有些數(shù)據(jù)不適合使用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高階用法,參數(shù)二(選填):function
JSON.stringify高階用法,參數(shù)二:[]或者function用法 參數(shù)三:number類型(key值空格縮進),字符串(key前面添加字符串)

// JSON.parse高階用法,參數(shù)二(選填)let setJson = JSON.parse(jsonValue, function (key, value) {if (key != 'domain') {return value}})console.log(setJson) //{name: "我是大哥大", hero: "楊戩", expires: "單詞"}// JSON.stringify高階用法,參數(shù)二:[]或者function用法 參數(shù)三: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": "單詞"// }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。