使用原生ES5封裝 call, apply, bind 等方法

時間 2021-04-04

標籤 html app this es5 prototype code htm get 欄目軟件設計简体版

原文原文鏈接

直接上代碼，你們一看就明瞭

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>call-apply-bind</h2>
  <script>

    'use strict'

    Function.prototype.call = function () { // 純es5寫法

      var targetFuc = this;

      var thisArg = arguments[ 0 ]

      if ( !(typeof thisArg === 'object' || typeof thisArg === 'function') ) {

        throw new Error( 'type error' )

      }

      thisArg.nestFuc = targetFuc

      var evalString = 'thisArg.nestFuc('

      for ( var i = 1; i < arguments.length; i++ ) {

        evalString += 'arguments[' + i + '],'

      }

      evalString += ')'

      console.log( evalString )

      return eval( evalString )

    }

    Function.prototype.apply = function ( thisArg, argArray ) {

      if ( !(typeof thisArg === 'object' || typeof thisArg === 'function') ) {

        throw new Error( 'type error' )

      }

      var targetFuc = this;

      thisArg.nestFuc = targetFuc

      var evalString = 'thisArg.nestFuc('

      for ( var i = 0; i < argArray.length; i++ ) {

        evalString += 'argArray[' + i + '],'

      }

      evalString += ')'

      console.log( evalString )

      return eval( evalString )

    }


    Function.prototype.bind = function () {

      var targetFuc = this;

      var slice = Array.prototype.slice

      var argumentsArray = slice.call( arguments )

      var thisArg = argumentsArray[ 0 ]

      if ( !(typeof thisArg === 'object' || typeof thisArg === 'function') ) {

        throw new Error( 'type error' )

      }

      return function () {

        targetFuc.apply( thisArg, argumentsArray.slice(1).concat( slice.call( arguments ) ) )

      }

    }

    var f1 = function (x,y) { console.log( this, x, y ) }

    f1.call( { a: 1 }, 6, 7 )

    f1.apply( { a: 1 }, [ 6, 7 ] )


    var f2 = function (x,y) { console.log( this, x, y ) }

    f2.bind( { b:1 }, 8, 9 )()


  </script>
</body>
</html>