最近看NCZ的JS高級程式設計整理的一些代碼

来源:https://www.cnblogs.com/jusing50a/archive/2018/07/24/9359913.html
-Advertisement-
Play Games

// 6.2.4 組合使用構造函數和原型模式————創建自定義對象的方法： function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "C ...



// 6.2.4 組合使用構造函數和原型模式————創建自定義對象的方法：

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}

Object.defineProperties(Person.prototype, {
"constructor": {
enumerable: false,
value: Person,
},
"sayName": {
enumerable: true,
value: function() {
console.log(this.name)
}
}
})

var person1 = new Person("Nicholas", 29, "Software Engineer");


// 6.2.5動態原型模式————將原型封裝到構造函數中：

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;

// 只在第一次使用構造函數時if塊內的語句才會執行
if (typeof this.sayName.toLowerCase() != "function") {
Person.prototype.sayName = function() {
console.log(this.name);
}
}
}

var person1 = new Person("Nicholas", 29, "Software Engineer");


// 6.2.6 寄生構造函數模式————用於為原生構造函數定義新的方法,避免污染原生構造函數

function Person(name, age, job) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.job = job;
obj.sayName = function() {
console.log(this.name);
}
return obj;
}

// 與工廠模式的區別是多了一個new操作符
var person1 = new Person("Nicholas", 29, "Software Engineer");

// ________________________________________________________________________

//寄生構造函數模式可以構造基於特殊對象(如數組)創建的具有指定方法的特殊對象
function SpecialArray() {
var values = new Array();
values.push.apply(values, arguments);
values.toPipedString = function() {
return values.join("|");
}
return values;
}


// 6.2.7 穩妥構造函數模式————將變數封裝到構造函數內部，不能通過對象屬性訪問，只能通過對象方法訪問

function Person(name, age, job) {
var obj = new Object();
obj.sayName = function() {
console.log(name);
}
return obj
}

var person1 = Person("jusing");
// 只能通過person1.sayName()方法訪問"jusing";person1對象實例中沒有name屬性


// 6.3.3 組合繼承模式(原型鏈+構造函數)


// ！！！！！！！最常用的繼承方法！！！！！！！

//先定義超類型構造函數，綁定屬性
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}

// 再定義超類型構造函數的原型，綁定方法；
SuperType.prototype.sayName = function() {
console.log(this.name);
}


// 定義子類型構造函數
function SubType(name, age) {

// 通過向子類型傳參，設置子類型實例的屬性值；
SuperType.call(this, name);
this.age = age;
}

// 將子類型的原型設置為超類型的對象實例
SubType.prototype = new SuperType();
Subtype.sayAge = function() {
console.log(this.age);
}


// 6.3.4 原型式繼承————直接以對象實例為原型創建構造函數並返回子類型對象實例

// ECMAScript為原型式繼承提供了原生方法： Object.create(obj, [A-V Object]),這個方法接受兩個參數，第一個是原型對象，第二個為鍵值對象（可選）
function object(obj) {
function F() {};
F.prototype = obj;
return new F();
}

var person = {
name: "jusing",
friends: ["Shelby", "Court", "Van"]
}

person1 = object(person);


// 6.3.5 寄生式繼承————在主要考慮對對象實例的繼承而不是自定義子類型對象的屬性時，簡單易用

function createAnother(obj) {
var clone = Object.create(obj);

// 增強對象的方法
clone.sayHi = function() {
console.log("Hi!");
}
return clone;
}
// 註意在使用寄生式繼承方法為對象添加方法時不能做到方法的復用，會浪費大量的資源


// 6.3.6 寄生組合式繼承————避免在超類型.prototype上創建多餘的屬性，還能保證原型鏈的不變。
// 這是開發人員普遍認為最完美的繼承方法

function inheritPrototype(subtype, supertype) {

// 創建超類型的原型對象作為子類型的原型
var prototype = Object.create(supertype.prototype);

// 將超類型的原型.constructor指向子類型構造函數
prototype.constructor = subType;

// 將子類型構造函數的原型指向超類型的原型
subType.prototype = prototype;
}

//先定義超類型構造函數，綁定屬性
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}

// 再定義超類型構造函數的原型，綁定方法；
SuperType.prototype.sayName = function() {
console.log(this.name);
}


// 定義子類型構造函數
function SubType(name, age) {

// 通過向子類型傳參，設置子類型實例的屬性值；
SuperType.call(this, name);
this.age = age;
}

// 實現寄生組合繼承方法
inheritPrototype(SubType, SuperType);

// 為超類型的原型(此時已成為子類型構造函數的原型)添加方法
SubType.prototype.sayAge = function() {
console.log(this.age);
}


// 6.3.7 深度克隆————完全克隆一個引用值，但是不包括其原型鏈

function deepClone(origin, target) {
var target = target || {},
toStr = Object.prototype.toString,
arrStr = "[object Array]";

for(var prop in origin) {

// 過濾掉origin.prototype原型鏈上的屬性
if (origin.hasOwnProperty(prop)) {

// 針對origin上非null的對象屬性
if(origin[prop] !== "null" && typeof(origin[prop]) == "object") {

// 判斷是否為origin[prop]是否為數組對象
if(toStr.call(origin[prop]) == arrStr) {
target[prop] = [];
}

// 否則為對象
else {
target[prop] = {};
}

// 對數組與對象屬性進行遞歸方法
deepClone(origin[prop], target[prop]);
}

// 字元串等基本類型直接copy
else {
target[prop] = origin[prop];
}
}
}
return target;
}

 

// 7.4 私有變數————只能通過特權方法訪問函數內部變數

function MyObject() {

// 創建私有變數和私有函數
var privateVriable = 10;
function privateFunction() {
return false;
}

// 特權方法
this.publicMethod = function() {
console.log(privateVriable ++, privateFunction());
}
}
// 這種方法會導致特權方法重覆綁定，復用性不好

 


7.4.1 靜態私有變數————解決私有方法的復用性問題

(function() {

// 創建私有變數和私有函數
var privateVriable = 10;
function privateFunction() {
return false;
}

// 使用構造函數及原型綁定私有變數與函數
MyObject = function() {}; //這裡沒有用new操作符，將MyObject定義為全局變數，函數執行後可訪問

//原型
MyObject.prototype.publicMethod = function() {
console.log(privateVriable ++, privateFunction());
}
})


7.4.3 增強的模塊模式————私有變數、方法復用、對象增強

var singleton = function() {
var privateVriable = 10;
function privateFunction() {
return false;
}

var object = new CustomType();

object.publicProperty = true;

object.publicMethod = function() {
console.log(privateVriable ++, privateFunction());
}
return object;
}();

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 用mongols輕鬆打造websocket應用
    用websocket做聊天系統是非常合適的。 mongols是一個運行於linux系統之上的開源c++庫，可輕鬆開啟一個websocket伺服器。 首先，build一個websocket伺服器。 才幾行，這就成了嗎？沒錯！不信你用wsdump.py測試下。測了啊，怎麼一發送消息就關閉了連接？這是因為 ...
  • layui 的 GitHub 及 Gitee (碼雲) 倉庫
    GitHub: https://github.com/sentsin/layui/ Gitee：https://gitee.com/sentsin/layui ...
  • HTML標簽
    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <style type="text/css"> *{ margin: 0px; padding: 0px; } body{ wid ...
  • JS實現文本中查找並替換字元
    JS實現文本中查找並替換字元 效果圖： 代碼如下，複製即可使用： 如有錯誤，歡迎聯繫我改正，非常感謝！！！ ...
  • HTML5
    <!DOCTYPE html> 1、定義： DOCTYPE標簽是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記語言解析器，它應該使用什麼樣的文檔類型定義（DTD）來解析文檔。<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標簽之前。 2、作用： 聲明文 ...
  • JavaScript 中函數的參數
    functionName(parameter1, parameter2, parameter3) { // 要執行的代碼…… } 參數規則 JavaScript 函數定義時形參沒有指定數據類型。 JavaScript 函數對實參的類型不會進行檢測。 JavaScript 函數對實參的個數不會進行檢測 ...
  • JS實現用特殊符號替換字元串的中間部分區域
    一、引入 相信很多人都遇到過敏感信息需要做部分隱藏功能，大多數都是用特殊符號去替換。 正好今天我又遇到這樣的前端顯示的需求，正好把相關JS記錄下來，方便下次再用。 二、JS部分 三、應用實例 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta ...
  • Vue學習之路8-v-on指令學習簡單事件綁定之屬性
    前言 上一篇文章以v-on指令綁定click事件為例介紹了v-on指令的使用方法，本文介紹一下v-on綁定事件的一些屬性的使用方法。 v-on綁定指令屬性 .stop屬性 阻止單擊事件繼續向上傳播（簡單點說就是不讓父節點及父節點以上的節點事件觸發），本示例如果沒有stop屬性，父節點和爺爺節點事件將 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類