91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript引用類型的實現方法

發布時間:2020-07-27 15:34:37 來源:億速云 閱讀:362 作者:小豬 欄目:web開發

這篇文章主要講解了JavaScript引用類型的實現方法,內容清晰明了,對此有興趣的小伙伴可以學習一下,相信大家閱讀完之后會有幫助。

數組

在ECMAScript中數組是非常常用的引用類型
ECMAScript所定義的數組和其他語言中的數組有著很大的區別
數組也是一種對象

創建數組

//方法一
var arr = new Array();

//方法二
var arr1 = [];

特點

  • 數組即一組數據的集合

  • js數組更加類似java的map容器。長度可變,元素類型任意

  • 數組長度隨時可變!隨時可以修改!(length屬性)

    var arr1 = [123,324,true,'abc',1,4,5,new Date()];
    
    arr1.length = 5;
    
    console.log( arr1 );
    //log 里面是傳遞的字符串 , JS引擎默認會調用.toString(); 隱式的調用.
     

常用方法

push、pop
shift、unshift
splice、slice
concat、join、sort、reverse(逆序)

影響原數組
splice()
arr.splice(開始項,[控制幾位數,值]); //statr ,count ,
var arr = [1,2,3,4,5,6,7];
var zf = arr.splice(3); //控制幾位數, 默認值 :arr.length-1 //包括3 原來項數
console.log( arr ); //[1,2,3]
console.log( zf ); //[4,5,6,7] //返回值 -- 取出的內容

var arr = [1,2,3,4,5,6,7]; 
var zf = arr.splice(3,2); //截取
console.log( arr ); //[1, 2, 3, 6, 7]
console.log( zf ); //[4,5] 

var arr = [1,2,3,4,5,6,7]; 
var t = arr.splice(3,2,'zf','dd'); //替換
console.log( arr ); //[1,2,'zf','dd',6,7]
console.log( t ); //[4,5]

var arr = [1,2,3,4,5,6,7]; 
var t = arr.splice(3,0,'zf','dd'); //插入
console.log(arr); //[1,2,3,'zf','dd',4,5,6,7]
console.log( t ); //[] //如果為0 ,去除空數組

var arr = [1,2,3,4,5,6,7]; 
var 12 = arr.splice(-4); //截取
console.log( arr ); //[1,2,3]
console.log( zf ); //[4,5,6,7]

//
slice(stat,end) //去出了end-stat 項。 不包括end項。

var zf = arr.sort(function ( a,b ) { //傳遞匿名函數,通過匿名函數參數判斷大小。
  if( a>b ){
    return 1;
  } else if( a<b ){
    return -1;
  } else {
    return 0;
  }
});
console.log( arr ); //["a", "b", "e", "z"]
console.log( zf ); //["a", "b", "e", "z"]

// 影響原數組
push , pop ,unshift ,shift ,splice ,reverse ,sort
// 未影響 原數組
concat ,slice ,join

ES5數組新特性

位置方法:indexOf lastIndexOf
迭代方法:every filter forEach some map
縮小方法:reduce reduceRight

// indexOf(); //查找位置 

var arr = [234,23,45,46,45,645,56];

//1個參數的時候,表示傳值 返回索引位置
var idxVal = arr.indexOf(45);

//2個參數的時候, 第一個表示查詢的值,第二個參數是 傳值,表示起始開始查詢的起始位置
var idxVal = arr.indexOf(2,3);

//查找數組比較的時候 是 "===" 

//找不到返回 -1

//迭代方法

//every : 對于數組每一個元素進行一個函數的運行 如果函數都返回true, 最后則返回true。 如果有一個返回false 最后結果則返回false。
// 測試數組的所有元素是否都通過了指定函數的測試 

var arr = [1,2,3,4,3,2,4,6];

var reslut = arr.every(function ( item,index,array ) {
  
  return item > 0;
  
});

console.log( reslut ); //true

//filter : 對于數組的每一個元素進行一個函數的運行 給定的函數執行, 把過濾后的結果返回。

var arr = [1,2,3,4,3,2,4,6];

var reslut = arr.filter(function ( item,index,array ) {
  
  return item > 2; //所有大于2 的過濾出來
  
})

console.log( reslut ); //[3, 4, 3, 4, 6]

//forEach : 循環數組每一項, 并執行一個方法
// 方法中的參數:數組成員的值,數組成員的索引,原數組(修改原數組會影響原來遍歷的數組)

var arr = [1,2,3,4,3,2,4,6];

arr.forEach(function ( item,index,array ) {
  
  console.log( item );
  
});

var arr1 = ['tan', 'cyan', 'pink', 'red'];
arr1.forEach(function ( val, idx, arrs ) {
  
  return 1; // 返回返回并不會影響原數組
  
});
console.log(arr);

//map : 對于數組的每一個元素進行一個函數的運行 可以經過函數執行完畢  把新的結果返回, 原數組不變。

var arr = [1,2,3,4,3,2,4,6];

var reslut = arr.map(function ( item,index,array ) {
  
  return item * 3;
  
}); 

console.log( reslut ); //[3, 6, 9, 12, 9, 6, 12, 18]

//some : 對于數組每一個元素進行一個函數的運行 如果有一項返回true 最后則返回true 如果每一項都返回false, 最后才返回false。 

var arr = [1,2,3,4,3,2,4,6];

var reslut = arr.some(function ( item,index,array ) {
  
  return item > 5; //有一個返回true, 就返回true
  
});

console.log( reslut ); //true

//模擬filter方法
Array.prototype.filter = function ( cb ) {
  
  var reslut = [];
  
  try{
    
    if ( cb && cb.constructor === Function ) {
        
      for ( var i=0; i<this.length; i++ ) {
        
        if ( cb.call(this[i],this[i],i,this) ) {
          
          reslut.push(this[i]);
          
        }
    
      }
      
    }
    
  }catch(e){
    //TODO handle the exception
  }
  
  return reslut &#63; reslut : '';
  
}

var a = arr.filter(function ( item,index,arr ) {
  
  return item > 2;
  
});
console.log( a );

// 模擬some
Array.prototype.some = function ( fn ) {
  
  try{
    
    if ( fn && fn.constructor === Function ) {
      
      
      for ( var i=0; i<this.length; i++ ) {
        
        // 存在一個函數執行結果 為true , 返回true
        if ( fn.call(this[i], this[i], i, this) ) {
          
          return true;
          
        }
        
      }
      return false;
    }
    
  }catch(e){
    //TODO handle the exception
  }
  
}

var arr = [1,2,3,4,3,2,4,6];

// reduce reduceRight

// 前一個值, 當前值, 索引位置, array 
// 數組中的每個值(從左到右)開始合并,最終為一個值。
// 接收一個函數作為累加器,數組中的每一個值(從左到右)開始合并,最終為一個值。
var reslut = arr.reduce(function ( prev,cur,index,array ) {
  
  return prev + cur;
  
});

console.log( reslut ); //25

// reduceRight 從右開始遍歷
var reslut1 = arr.reduceRight(function ( prev,cur,index,array ) {
  
  return prev + cur;
  
});

console.log( reslut ); //25

// 得到接口的對象

var o = (function() {
  var person = {
    name: 'xixi',
    age: 22,
  }
  return {
    sayName: function(k) {
      return person[k];
    },
  }
}());

var person = ['name', 'age'].reduce(function (obj, k) {
//   console.log(obj, k,'--');
  obj[k] = o.sayName(k);
  return obj;
},{});

console.log(person);

數組判斷方法:
Array.isArray();
判斷是否為數組,如果是,則返回true,否則返回false。

var arr = [];
console.log( Array.isArray(arr) );

填充方法:
fill();
實現對數組的填充
參數:接受值,直接填充,如果是函數,也是直接填充

// arr.fill(1);
// arr.fill(function () {
//   return 2;
// });
// arr.fill([1,2,3]);
arr.fill({x: 1});

console.log(arr);

Object

引用類型都是Object類型的實例,Object也是ECMAScript中使用最多的一種類型(就像java.lang.Object一樣,Object類型是所有它的實例的基礎) //所有類的 基礎類。

Object類型的創建方式、使用

對于Object類型應用for in 枚舉循環

Obj每個實例都具有屬性和方法

Constructor: 保存著用于創建當前對象的函數。(構造函數)

hasOwnProperty(propertyName):用于檢測給定的屬性在當前對象實例中(而不是原型中)是否存在。

isPrototypeOf(Object): 用于檢查傳入的對象是否是另外一個對象的原型。

propertyIsEnumerable(propertyName):用于檢查給定的屬性是否能夠使用for-in語句來枚舉。

toLocaleString():返回對象的字符串表示。該字符串與執行環境的地區對應.

toString():返回對象的字符串表示。

valueOf():返回對象的字符串、數值或布爾表示。

OBject.prototype.toString()

Object.prototype.toString
作用:根據內部的this返回一個類似于這樣的字符串 [object constructorName]
這個方法有個缺點,不能獲取用戶自定義對象的具體類型.
只能獲取內置對象的類型.
自定義對象類型都返回:[object Object]

console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call(Array)); // [object Fcuntion]
console.log(Object.prototype.toString.call(new Date())); // [object Date]

// 簡寫方式
console.log(({}).toString.call([])); // [object Array]

toString();

// 字符串 ==> String.prototype.toString();
var a = 't';
console.log(a.toString()); // t
var a = new String(); 
console.log(a.toString()); // 空字符串
var a = new String('string');
console.log(a.toString());  // string

// 數組 ==> Array.prototype.toString();
var b = [1, 2, 3, 4];
console.log(b.toString()); // 1,2,3,4
var b = [];
console.log(b.toString()); // 空字符串
var b = new Array();
console.log(b.toString()); // 空字符串
var b = new Array(3, 5);
console.log(b.toString()); // 3,5

// 對象 ==> Object.prototype.toString();
var c = {};
console.log(c.toString()); // [object Object]

// 函數
console.log(Function.toString()); // function Function() { [native code] }
console.log(Array.toString()); // function Array() { [native code] }
console.log(RegExp.toString()); // function RegExp() { [navtive code] }

關于JSON函數

JSON.parse()

作用:將JSON字符串解析成JavaScirpt值。在解析過程中,可以選擇性的修改某些屬性的原始解析值。
參數1:JSON字符串
參數2: reviver 函數,用來轉換解析出的屬性值。(可選參數)
返回值:解析出的一個 Object

console.log(JSON.parse(10)); // 10
console.log(JSON.parse(true)); // true
console.log(JSON.parse('"xixi"')); // xixi
console.log(JSON.parse(null)); // null
console.log(JSON.parse('"undefined"')); // undefined
console.log(JSON.parse("[]")); // []

如果指定了 reviver 函數,解析的出的Object, 解析值本身以及它所包含的所有屬性,會按照一定的順序(從最最里層的屬性開始,一級級往外,最終到達頂層)分別去調用 指定的reviver 函數。

在調用過程中,當前屬性所屬的對象會作為this值,當前屬性名和屬性值會分別作為第一個參數和第二個參數傳入 reviver 函數中,如果 reviver 函數返回undefeind,則當前屬性會從屬性對象中刪除,如果返回了其它值,則返回的值會成為當前屬性新的屬性值。
當遍歷到最頂層的值(解析值)時,傳入reviver函數的參數會是空字符串''(因為此時已經沒有真正的屬性)和當前的解析值(有可能已經被修改過),當前的this值會是{"":修改過的解析值},

JSON.parse('{"p": 5}', function (key, val) {

 if(key === '') return val;   // 如果到了最頂層,則直接返回屬性值
  
 return val * 2;
  
}); 

JSON.stringify();

stringify(value [,replacer, [space]]);
將任意的JavaScript值序列化成JSON字符
參數1:value: 將序列化成JSON字符串的值
參數2:replacer: 可選,如果是一個函數,則在序列化過程中,被序列化的值的每個屬性都會經過該函數的轉換和處理。 如果是一個數組,則暴行在這數組中的屬性名才會被序列化到最終的JSON字符串中。
參數3:space, 指定縮進可通的空白字符串,用于美化輸出。 控制結果字符串里的間距。

注意:

  • 不可枚舉的屬性會被忽略

  • 非數組對象的屬性不能保證以特定的順序出現的序列化后的字符串中。

  • 布爾值,數字,字符串的包裝對象在序列化過程中會自動裝換成對應的原始值。

  • undefeind,任意的函數,以及symbol值,在徐淚花過程橫縱揮別忽略(出現在非數組對象的屬性值中時)或者被轉換成null(出現在數組中時)

  • 所有以symbol為屬性鍵的屬性值都會被完全忽略掉,即便 replacer參數中強制指定包含了它們

    console.log(JSON.stringify([undefined, Object, Symbol()])); // null, null, null
    console.log(JSON.stringify({x: undefined, y: Object, z: Symbol()})); // {}
     

Object.create

ES5為對象提供了一個Object.create();
作用:創建一個類,是一種寄生式繼承。
返回一個類,這個類的原型指向傳遞進來的對象。

創建的實例化對象,構造函數指向的是繼承的對象的類的構造函數。本身沒有原型,可以通過原型鏈找到繼承的對象類中的原型。具有繼承對象上的屬性以及方法。
因此,創建的實例化對象可以使用繼承對象上的屬性和方法。

var Book = function (title, price) {
  
  this.title = title;
  
  this.price = price;
  
}

Book.prototype.sayTitle = function () {
  
  return this.price;
  
}

var book = new Book('one', 10);

// 創建一個繼承類
var NewBook = Object.create(book);

console.log(NewBook.constructor);

var price = NewBook.sayTitle();

console.log(price);

// 模擬 Object.create();
// 寄生式繼承
Object.prototype.create = function ( obj ) {
  
  try{
    
    if ( obj && obj.constructor === Object ) {
      
      function F () {}
      
      F.prototype = obj;
      
      return F;
      
    }
      
    
  }catch(e){
    //TODO handle the exception
  }
  
}

// 創建一個繼承類
var NewBook = Object.create(book);

console.log(NewBook.constructor);

var price = NewBook.sayTitle();

console.log(price);

Object.defineProperty

Object.defineProperty();
直接在一個對象上定義一個新屬性,或者修改一個已經存在的屬性,并返回這個對象。
參數1:需要被設置的對象
參數2:設置的屬性名
參數3:配置項,添加屬性的特性屬性

特性屬性:
value:該屬性值,默認值:undefeind
writable: 可否被修改,默認值:false (不能被修改)
configuarable: 能否通過delete刪除屬性從而重新定義屬性,能夠修改屬性的特性,或者能否把屬性修改為訪問屬性。 默認值:false;(不可以重新定義或刪除)
enumerable: 是否可以被for-in枚舉。默認值:false

var obj = {};

Object.defineProperty(obj, 'title', {
  
  value: 'tan',
//        writable: true,
  configurable: false,
//        enumerable: true
  
});

delete obj.title;

//      obj.title = 'pink';

//      for ( var i in obj ) {
//        
//        console.log(obj[i]);
//        
//      }

console.log(obj);

特性方法:
set:給屬性提供setter的方法,如果沒有setter則為undefined。默認值undefiend。
參數:該參數的新值分配給該屬性。默認:undefined

Object.defineProperty(obj, 'title', {
  
  get: function () {
    console.log('get');
    return this._title;
  },
  set: function ( val ) {
    this._title = val;
  }
  
});

obj.title = 'pink';

var t = obj.title;

defineProperties

在一個對象上添加或修改一個或多個自有屬性,并返回該對象。
參數1:表示要被處理的對象
參數2:定義多個屬性特性對象

var obj = {}

Object.defineProperties(obj, {
  
  color: {
    value: 'tan'
  },
  
  names: {
    value: 'zf'
  }
  
});

console.log( obj );

getOwnPropertyNames

Object.getOwnPropertyNames();
返回一個由指定對象的所有自身屬性的屬性名(包括不可枚舉屬性)組成的數組。
參數:需要獲取的對象。

getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor();
指定對象上一個自由屬性對應的屬性描述符。(自由屬性指的直接賦予該對象的屬性,不需要從原型鏈上進行查找的屬性)
參數1: 獲取的對象。
參數2:獲取的屬性值

模擬map

模擬java中的Map

    //簡單實現 map

function Map () {
  
  //priveate 的對象來保存 key 和 val
  var obj = {};
  
  // put 方法
  this.put = function ( key,val ) {
    
    
    obj[key] = val;  //把鍵值對 綁定到object上.
    
  }
  
  //獲得map 容器的個數
  this.size = function () {
    
    var count = 0;
    
    for ( var i in obj ) {
      
      count++;
      
    }
    
    return count;
    
  }
  
  //根據key 得到 val
  this.get = function ( key ) {
    
    return obj[key] || (obj[key] === 0) || (obj[key] === false) &#63; obj[key] : null;
    
  }
  
  // remove 刪除方法
  this.remove = function ( key ) {
    
    if ( obj[key] || obj[key] === 0 || obj[key] === false ) delete obj[key]; 
    
  }
  
  //eachMap 遍歷 map 容器的方法
  this.eachMap = function ( cb ) {
    
    if ( cb && cb.constructor === Function ) {
      
      for ( var i in obj ) {
        
        cb.call(this,i,obj[i]);
        
      }
      
    }
    
  }
  
}

var m = new Map();

m.put('01',120);
m.put('02','tan');

//      console.log( m.size() );
//      
//      console.log( m.get('0') );

//      m.remove('01');
//      console.log( m.get('01'),'--' );

m.eachMap(function ( key,val ) {
  
  console.log( key,val,'---' );
  
});    

去掉數組的重復項

var arr = [1,2,4,2,3,4,5,546,57,6,5,4,31,57];

//js 對象特性, 數組去重 
// 在 js 對象 中 key 是永遠 不會重復的.


// 1, 把數組轉成一個js的對象
// 2,把數組中的值,變成js 對象當中的key
// 3,把對象再還原成數組

//數組轉對象
var toObject = function ( arr ) {
  
  var reslutObj = {};
  
  for ( var i=0; i<arr.length; i++ ) {
    
    if ( arr ) {
    
      reslutObj[arr[i]] = null; //賦值為任意值
      
    }
    
  }
  
  return reslutObj;
  
}

//對象轉成數組
var toArray = function ( obj ) {
  
  var reslutArr = [];
  
  for ( var attr in obj ) {
    
    if ( obj.hasOwnProperty(attr) ) { //判斷是否是自身上面的屬性
      
      reslutArr.push(attr);
      
    }
    
  }
  
  return reslutArr;
  
}

//去掉數組中的重復項
function uniq ( arr ) {
        
  return toArray(toObject(arr));
        
}
  
console.log( uniq(arr) );  

其他引用類型

單體對象(不需要實例化對象,就可以使用的方法):

Global對象(全局)這個對象不存在,無形的對象(特別的,特殊的存在)
其內部定義了一些方法和屬性:encodeURI 、encodeURIComponent、decodeURI、decodeURIComponent、eval、parseInt、parseFloat、isNaN(在js 里面 只有NaN 自己不等于自己本身的)、Escape、 unescape

// encodeURI 、encodeURIComponent、

var uri = 'http://www.baidu.com cn';
var str1 = encodeURI(uri); //http://www.baidu.com%20cn         //(url: //不會進行編碼)
var str2 = encodeURIComponent(uri); //http%3A%2F%2Fwww.baidu.com%20cn //任何不標準的文字都會進行編碼

console.log( str1 );
console.log( str2 );

// decodeURI、decodeURIComponent、
console.log( decodeURI(str1) ); // http://www.baidu.com cn
console.log( decodeURIComponent(str2) ); // http://www.baidu.com cn

//eval(string) 方法 無形的javascript 解析器

var str1 = 'var a = 10; var b = 20;';
eval(str1);

console.log( a+b );

//數組字符串 直接使用: eval(strArr);

var arr = '[10,203,345,45,6]';

var evalArr = eval(arr);

console.log( evalArr );

//對象字符串 
var obj = '{name: "123", age: 20}';

var evalObj = eval('(' + obj + ')' );

console.log( evalObj );//Object {name: "123", age: 20}

//escape unescape URI 轉碼
var str = '八百米';
var str2 = escape(str); //%u516B%u767E%u7C73

console.log( str2 );

Math對象
內置的Math對象可以用來處理各種數學運算
可以直接調用的方法:Math.數學函數(參數)
求隨機數方法:Math.random(),產生 [0,1) 范圍一個任意數

Date對象
獲取當前時間的一系列詳細方法

var date = new Date();

console.log( date.getTime() );   //當前時間的毫秒數

基本包裝類型:Boolean、String、Number

Function類型、RegExp類型

簡單單體和閉包單體

單體(singleton)模式是js中最基本但又最有用的模式之一,它可能比其他任何模式都常用。
這種模式提供了一種將代碼組織為一個邏輯單元的手段,這個邏輯單元中的代碼可以通過單一的變量進行訪問。通過確保單體對象只存在一份實例,就可以確信自己的所有代碼使用的都是同樣的全局資源。

簡單單體

// 簡單單體模式  (只能創建一個實例)//無法通過new 關鍵字來實例化.
var Singleton = { //當成模板類 
  attr1: true,
  attr2: 10,
  
  method1: function () {
    
    console.log( this.attr1 );
    
  }
  
}

Singleton.method1();

//劃分命名空間(區分代碼)  

閉包單體

//  利用閉包來創建單體 , 閉包主要的目的 , 保護數據

var alogy = {};
alogy.singleton = (function () {
  
  
  //添加私有成員
  
  var a = 100;
  var fn1 = function () {
    
    console.log( a );              
    
  }
  
  // 塊級作用域里的執行結果賦值 單體對象
  return {
    attr1: 10,
    attr2: 20,
    method: function () {
      console.log( this.attr1 );
    },
    fn1: fn1
  }
    
    
})();

alogy.singleton.method();
alogy.singleton.fn1();  

惰性單體

//惰性單體 (和閉包單體類似)

//通過 一個私有變量來控制是否 實例化對象, 初始化一個 init。

var Ext = {};

Ext.Base = (function () {

//私有變量 控制返回的單體對象
var uniqInstance; 

//需要一個構造器 init 初始化單體對象的方法
function Init () {
  
  //私有成員
  var a1 = 10;
  var a2 = true;
  
  var fun1 = function () {
    
    console.log( a1 );
    
  }
  
  return {
    attr1: a1,
    attr2: a2,
    fun1: fun1
  }
  
}

return {
  
  getInstance: function () {
    
    if ( !uniqInstance ) { //不存在 ,創建單體實例
      
      uniqInstance = new Init();          
      
    }
    
    return uniqInstance;
    
  }
  
}

})()

var init = Ext.Base.getInstance();

init.fun1(); //10

分支單體

//分支單體 (判斷程序的分支 - 瀏覽器差異的檢測)
//簡單判斷
var Ext = {};

var def = true; 

Ext.More = (function () {
  
  var ff = {
    attr1: 'ff'
  };
  
  var ie = {
    attr1: 'ie'
  }
  
  return def &#63; ff : ie;
  
})()

console.log( Ext.More.attr1 ); //ff

簡單鏈式編程實現

簡單鏈式調用。 return this;

//簡單函數鏈式調用 

function Dog () {
  
  this.run = function () {
    
    console.log( 'dog is run...' );
    
    return this;
    
  }
  
  this.eat = function () {
    
    console.log( 'dog is eat...' );
    
    return this;
    
  }
  
  this.slepp = function () {
    
    console.log('dog is sleep');
    
    return this;
    
  }
  
}

var d1 = new Dog();

d1.run().eat().slepp();   

模擬jquery底層代碼

//模擬jquery底層鏈式編程
  
// 函數自執行 特點:
// 1: 程序啟動時候  里面代碼自動執行
// 2: 內部的成員變量 外部無法訪問 (除了不加var修飾的變量)

//塊級 作用域  

(function ( window,undefined ) {
  
  //$ 最常用的對象 返回給外界 //大型程序開發  一般使用 '_'作為私有的對象
    
  function _$ ( args ) {
    
    // 匹配id 選擇器
    var idSelect = /^\#[\w+]&#63;/;
    
    this.dom; // 接收所得到的元素
    
    if ( idSelect.test(args) ) { //匹配成功接收元素 // #div 
      
      this.dom = document.getElementById(arguments[0].substr(1));
    
    } else {
      
      throw new Error('選擇器不正確!');
      
    }
    
  }
  
  //在Function類上 擴展 一個可以實現 鏈式編程的方法
  Function.prototype.method = function ( methodName,fn ) { //實現鏈式編程, 方法的名字 和 進行調用的函數是什么
    
    this.prototype[methodName] = fn;
    
    return this; //鏈式編程
    
  }
  
  // 在 _$ 原型對象上 加一些公共的方法
  _$.prototype = {
    
    constructor: _$,
    
    addEvent: function ( type,cb ) {
      
      //ff chrome
      if ( window.addEventListener ) { 
        
        this.dom.addEventListener(type,cb,false);
        
      //ie
      } else if ( window.attachEvent ) { 
        
        this.dom.attachEvent('on'+type,cb);
        
      }
  
      return this;
      
    },
    
    setStyle: function ( key,val ) {
      
      this.dom.style[key] = val;
      
      return this;
      
    }
    
  }
  
  //window上注冊 一個 全局變量
  window.$ = _$;
  
  //準備方法
  _$.onReady = function ( cb ) {
    
    //1,實例化 _$ 對象 ,注冊到 window上
    window.$ = function ( args ) {
      
      return new _$(args); 
      
    }
    
    //2: 執行傳入的代碼
    cb.call(window);
    
    //3: 實現鏈式編程 
    _$.method('addEvent',function () {}).method('setStyle',function () {});
    
  }
  
})( window ) //程序的入口 window傳入作用域中      

$.onReady(function () {
  
  $('#div')
  .addEvent('click',function () {
    
    console.log('點擊了');
    
  })
  .setStyle('background','pink')
  
});

嚴格模式

嚴格模式是JavaScript中的一種限制性更強的變種方式。
嚴格模式與非嚴格模式可以共存,可以逐漸的選擇性加入嚴格模式。

全局作用域

定義變量必須通過var
嚴格模式禁止刪除聲明變量。

delete關鍵字

使用delete刪除一個變量名(而不是屬性名): delete myVariable

'use strict';

delete Object.prototype; // error . 
// 刪除一個不可配置的屬性

函數參數

定義相同名稱的參數
要求參數名唯一。
在正常模式下,最后一個重名參數名諱覆蓋之前的重名參數,之前的參數仍然可以通過arguments[i]來訪問,還不是完全無法訪問。

關鍵字,保留字

使用eval或arguments作為變量名或函數名

嚴格模式下:
訪問arguments.callee, arguments.caller, anyFunction.caller以及anyFunction.arguments都會拋出異常

禁止使用八進制

瀏覽器都支持以零(0)開頭的八進制語法:0644 == 420 還有 '\045 === '%''
認為數字的前導零沒有語法意義,但是會改變數字的意義。

eval

嚴格模式下不能向全局作用域下添加變量

在正常模式下,代碼eval('var x;') 會給上層函數或全局引入一個新的變量 x
嚴格模式下,eval為被運行的代碼創建變量,eval不會影響到名稱映射到外部變量或其它局部變量。

var x = 22;

var evalX = eval("var x = 42; x");

console.log(x === 22);
console.log(evalX === 42);

函數內部this

在正常模式下函數調用,this的值會指向全局對象,在嚴格模式中,this的值會指向undefiend。

當函數通過call和apply調用時,如果傳入的是thisvalue參數是一個null和undefiend除外的原始值(字符串,數字,布爾值),則this的值會成為那個原始值的對應的包裝對象。如果thisavlue參數的值是undefeind或null,則this的值會指向全局變量。在嚴格模式中,this值就是thisvalue參數的值,沒有任何類型轉換。

this: 僅在this指向自己創建的對象時使用它

arguments

arguments對象屬性不語對應的形參變量同步更新。
非嚴格模式下,修改arugmetns對象中的某個索引屬性的值,和這個屬性對應的形參變量的值也會同時變化。
嚴格模式下,arguments對象會以形參變量的拷貝的形式被創建和初始化。因此arguments對象的改變不會影響形參。

arguments: 總是通過形參的名字獲取函數參數,或者在函數的第一行拷貝arguments

var args = Array.prototype.slice.call(arguments)

with

嚴格模式禁用with。
with問題:塊內的任何變量都可以映射到with傳進來的對象的屬性,也可以映射到包圍這個塊的作用域內的變量(甚至是全局變量),在運行時才能夠決定:在代碼運行之前無法得到。
嚴格模式下,使用with會引起語法錯誤。

var x = 7;
with (obj) { // 語法錯誤
 // 如果沒有開啟嚴格模式,with中的這個x會指向with上面的那個x,還是obj.x?
 // 如果不運行代碼,我們無法知道,因此,這種代碼讓引擎無法進行優化,速度也就會變慢。
 x;
}

看完上述內容,是不是對JavaScript引用類型的實現方法有進一步的了解,如果還想學習更多內容,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

敖汉旗| 保山市| 庆安县| 穆棱市| 漳平市| 略阳县| 蒲城县| 徐闻县| 微山县| 西乌| 来宾市| 分宜县| 靖安县| 文山县| 长泰县| 申扎县| 尚义县| 丰都县| 昌乐县| 稷山县| 田东县| 同心县| 徐水县| 海林市| 新安县| 舞阳县| 福泉市| 青海省| 香河县| 巴彦淖尔市| 镇远县| 阿拉善左旗| 富顺县| 汕尾市| 达尔| 广东省| 沙河市| 克山县| 布尔津县| 伊金霍洛旗| 姜堰市|