欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript for in的缺陷總結

 更新時間：2017年02月03日 15:13:16   投稿：lqh  
這篇文章主要介紹了Javascript for in的缺陷總結的相關資料,需要的朋友可以參考下

Javascript for in的缺陷總結

for in 語句用來列舉對象的屬性(成員)，如下

var obj = { name:"jack",
   getName:function(){return this.name}
};
//輸出name,getName  
for(var atr in obj) {
  alert(atr);
}

注意了嗎，沒有輸出obj的toString，valueOf等內置屬性（或稱內置成員，隱藏屬性和預定義屬性）。即for in用來列舉對象的顯示成員（自定義成員）。

如果重寫了內置屬性呢，下面就重寫obj的toString

var obj = {name:"jack",
   getName:function(){return this.name},
   toString:function(){return "I'm jack."}
}
for(var atr in obj) {
  alert(atr);
}

會輸出什么呢？

1、IE6/7/8 下和沒有重寫toString一樣，仍然只輸出name,getName

2、IE9/Firefox/Chrome/Opera/Safari下則輸出name,getName,toString 

如果給內置原型添加屬性/方法，那么for in時也是可遍歷的

Object.prototype.clone = function() {}
var obj = {
  name: 'jack',
  age: 33
}
// name, age, clone
for (var n in obj) {
  alert(n)
}

給Object.prototype添加了方法clone，for in時所有瀏覽器都顯示了clone。

這或許還沒什么，因為一般不建議去擴展內置構造器的原型，這也是Prototype.js走向沒落的原因之一。jQuery和Underscore沒有擴展自原型，前者在jQuery對象上做文章，后者索性將所有方法都掛在下劃線上。

但有時我們?yōu)榱思嫒軪S5或后續(xù)版本，會在不支持ES5的瀏覽器上（IE6/7/8）去擴展內置構造器的原型，這時for in在各瀏覽器中就不同了。如下

if (!Function.prototype.bind) {
  Function.prototype.bind = function(scope) {
    var fn = this
    return function () {
      fn.apply(scope, arguments)
    }
  }
}
function greet(name) { 
  alert(this.greet + ', ' + name)
}
for (var n in greet) {
  alert(n)
}

IE6/7/8輸出了bind，其它瀏覽器則無。因為現代瀏覽器中bind是原生支持的，for in不到，IE6/7/8則是給Function.prototype添加了bind。

總結下：在跨瀏覽器的設計中，我們不能依賴于for in來獲取對象的成員名稱，一般使用hasOwnProperty來判斷下。

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

相關文章

  • JavaScript+html5 canvas制作色彩斑斕的正方形效果

    JavaScript+html5 canvas制作色彩斑斕的正方形效果

    這篇文章主要介紹了JavaScript+html5 canvas制作色彩斑斕的正方形效果,實例分析了JavaScript結合html5 canvas實現圖形動態(tài)繪制的技巧,需要的朋友可以參考下
    2016-01-01
  • 一文教你用純JS實現一個五子棋游戲

    一文教你用純JS實現一個五子棋游戲

    實現一個五子棋游戲, 簡要分析其原理, 頁面并沒有很花哨, 原理搞懂了, 后面的就是很輕松的事了,本文給大家介紹了如何用純JS實現一個五子棋游戲,文中通過代碼示例給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下
    2023-12-12
  • JS數據類型（基本數據類型、引用數據類型）及堆和棧的區(qū)別分析

    JS數據類型（基本數據類型、引用數據類型）及堆和棧的區(qū)別分析

    這篇文章主要介紹了JS數據類型（基本數據類型、引用數據類型）及堆和棧的區(qū)別,結合實例形式分析了JS基本數據類型、引用數據類型概念、用法,以及堆和棧的區(qū)別,需要的朋友可以參考下
    2020-03-03
  • 小程序云開發(fā)教程如何使用云函數實現點贊功能

    小程序云開發(fā)教程如何使用云函數實現點贊功能

    這篇文章主要為大家詳細介紹了小程序云開發(fā)教程如何使用云函數實現點贊功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-05-05
  • JavaScript實現簡單進度條效果

    JavaScript實現簡單進度條效果

    這篇文章主要為大家詳細介紹了JavaScript實現簡單進度條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-03-03
  • 簡述JS控制臺的使用

    簡述JS控制臺的使用

    本文給大家介紹了js控制臺的使用，非常不錯，具有一定的參考借鑒借鑒價值，需要的朋友參考下吧
    2018-07-07
  • 在knockoutjs 上自己實現的flux(實例講解)

    在knockoutjs 上自己實現的flux(實例講解)

    下面小編就為大家分享一篇在knockoutjs 上自己實現的flux方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • 淺析JavaScript的幾種Math函數,random(),ceil(),round(),floor()

    淺析JavaScript的幾種Math函數,random(),ceil(),round(),floor()

    本文主要對JavaScript的幾種Math函數,random(),ceil(),round(),floor()的作用進行簡要解析，具有很好的參考價值，需要的朋友一起來看下吧
    2016-12-12
  • 微信小程序獲取微信運動步數的實例代碼

    微信小程序獲取微信運動步數的實例代碼

    本篇文章主要介紹了微信小程序微信運動步數的實例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • Chart.js與ECharts.js圖表使用過程組件對比

    Chart.js與ECharts.js圖表使用過程組件對比

    chartjs只能基于canvas,雖然只有英文文檔,但定制化程度更高,社區(qū)成熟,功能就更加穩(wěn)定,ECharts.js可以基于svg或者canvas去渲染,有融合主流前端框架的社區(qū)庫,另外ECharts.js還支持3d效果的圖表,相當炫酷,國內開發(fā)者大多數使用這個,有中文文檔
    2023-10-10

最新評論