《JavaScript設計模式與開發》筆記 3.call和apply

標籤：script   json   tostring   toms   lan   ceo   led   data-   name   

•  1.改變this指向
•  2.Function.prototype.bind
•  3.借用其他對象方法
  • 1.借用實現繼承
  • 2.實現噁心的
    • Array.prototype.push.call
    • Array.prototype.join.call
    • Array.prototype.slice.call
    • Object.prototype.toString.call

1.改變this指向

var obj1 = {    name:"Bob marley"};var obj2 = {    name:"Bob Dylan"};var name = "David Bowie";var getName = function(){    console.log(this.name);}getName();  //輸出undefinedgetName.call(obj1); //輸出Bob marleygetName.call(obj2); //輸出Bob Dylan

 

在實際開發中，經常會遇到this指向被不經意改變的情境：例如:

document.getElementById(‘div1‘).onclick=function(){    alert(this.id);         //輸出div1    var func = function(){        alert(this.id);     //輸出undefined    }    func();};

 

使用call來修複func函數內的this，使其指向div

document.getElementById(‘div1‘).onclick=function(){    alert(this.id);    var func = function(){        alert(this.id);    }    func.call(this);};再如：var name = "SmarTom";var func = function(){    console.log(this.name);}func();

 

使用call來修複func函數內的this，使其指向div 再如：

var obj ={    name : "SmarTom"}var func = function(){    console.log(this.name);}func.call(obj);

 

2.Function.prototype.bind

大部分瀏覽器都實現了內建的Function.prototype.bind,用來指定函數內部的this指向 即使沒有原生的Function.prototype.bind實現，也可以類比一下，例如:

//在一些瀏覽器中可以忽略 bind函數

Function.prototype.bind = function(context){    var _self = this;    return function(){        return _self.apply(context,arguments);    }}var obj = {    name :"SmarTom"}var func = function(){    console.log(this.name);}.bind(obj);            //進行綁定func();

 

3.借用其他對象的方法【實現繼承】

1.借用實現繼承

var A = function(name){                 //父類 A    this.name = name;}var B = function(){                     //子類 B 繼承父類A    A.apply(this,arguments);}B.prototype.getName = function(){       //B方法    return this.name;}var b = new B(‘asdfasdfasdf‘);console.log(b.getName());

 

2.實現

Array.prototype.push.callArray.prototype.join.callArray.prototype.slice.callObject.prototype.toString.call()1. Array.prototype.push.callArray.prototype.push.call(obj,arguments)相當於var html = []; html.push(那一大堆)<script type="text/javascript">    (function () {        var customService = function () {        };        customService.prototype = {            open: function () {               contents: this._getHtml(),            },            close: function () {            },            _getHtml: function () {                var html = [];                Array.prototype.push.call(html,                    ‘<div class=\"content\">‘,                        ‘<div>1、</div>‘,                        ‘<div>2、<\/div>‘,                        ‘<div>3、<\/div>‘,                        ‘<div>4、<\/div>‘,                    ‘<\/div>‘                );                return html.join(‘‘);            }        };        window.CustomService = new customService();    })();</script>2.Array.prototype.join.call//arguments就相當於一個對象數組Array.prototype.join.call(arguments,‘,‘)就類似於window.join方法.apply,call不會改變scope,可參考finally裡的內容<script type="text/javascript">var join = function () {    for (var i = 0, b = ‘‘; i < this.length ; i ++) {        if (i) b+= arguments[0];        b += this[i];    }    return b;}; var show = function () {    //new Array(arguments)).join(‘_‘);    //try    try {        alert(            Array.apply(null, arguments).join(‘_‘)        );        return join.call(arguments, ‘-‘); //Array.prototype.join就類似於window.join方法.apply,call不會改變scope,可參考finally裡的內容    } finally {        var func = function () {            alert(a);        };         void function () {            var a = 1;            try {                func.call(this);            } catch (exp) {                alert(exp.message);            }        }();    }}; alert(show(1, 2, 3, 5));</script>3.Array.prototype.slice.callvar a={length:2,0:‘first‘,1:‘second‘};Array.prototype.slice.call(a);//  ["first", "second"]var a={length:2};Array.prototype.slice.call(a);//  [undefined, undefined]可能剛開始學習js的童鞋並不是很能理解這句為什麼能實現這樣的功能。比如我就是一個，所以，來探究一下。首先，slice有兩個用法，一個是String.slice,一個是Array.slice，第一個返回的是字串，第二個返回的是數組，這裡我們看第2個。Array.prototype.slice.call(arguments)能夠將arguments轉成數組，那麼就是arguments.toArray().slice();到這裡，是不是就可以說Array.prototype.slice.call(arguments)的過程就是先將傳入進來的第一個參數轉為數組，再調用slice？4.Object.prototype.toString.call使用Object.prototype上的原生toString()方法判斷資料類型，使用方法如下：Object.prototype.toString.call(value)1.判斷基本類型：Object.prototype.toString.call(null);//”[object Null]”Object.prototype.toString.call(undefined);//”[object Undefined]”Object.prototype.toString.call(“abc”);//”[object String]”Object.prototype.toString.call(123);//”[object Number]”Object.prototype.toString.call(true);//”[object Boolean]”2.判斷原生參考型別：函數類型Function fn(){console.log(“test”);}Object.prototype.toString.call(fn);//”[object Function]”日期類型var date = new Date();Object.prototype.toString.call(date);//”[object Date]”數群組類型var arr = [1,2,3];Object.prototype.toString.call(arr);//”[object Array]”Regexvar reg = /[hbc]at/gi;Object.prototype.toString.call(arr);//”[object Array]”自訂類型function Person(name, age) {    this.name = name;    this.age = age;}var person = new Person("Rose", 18);Object.prototype.toString.call(arr); //”[object Object]”很明顯這種方法不能準確判斷person是Person類的執行個體，而只能用instanceof 操作符來進行判斷，如下所示：console.log(person instanceof Person);//輸出結果為true3.判斷原生JSON對象：var isNativeJSON = window.JSON && Object.prototype.toString.call(JSON);console.log(isNativeJSON);//輸出結果為”[object JSON]”說明JSON是原生的，否則不是；注意：Object.prototype.toString()本身是允許被修改的，而我們目前所討論的關於Object.prototype.toString()這個方法的應用都是假設toString()方法未被修改為前提的。

 

《JavaScript設計模式與開發》筆記 3.call和apply