javascriptオブジェクト向けプログラミング(三)

67346 ワード

ES 6 高次関数関数が閉じられていますビッド

javascriptオブジェクト向けプログラミング(三)
今日はクローズドを勉強しました.関数に関する知識をまとめました.
一、trim()関数
trim()は主に文字列の左右のスペースを取り除くために使われますが、中央のスペースは削除されません.

<script>
let btn = document.querySelector("button");
    let div = document.querySelector("div");
    btn.addEventListener("click",function(){
      
      let str = input.value.trim();
      if(str=== ""){
      
        alert("     ");
      }
      else{
      
        div.innerHTML = str;
        console.log(str);
        console.log(str.length);
      }
    })
script>

ここは一例のデモです.入力フォームにスペースがあるときは、左右のスペースを除いて空かどうか調べられます.
二、Object.defineProperty()
Object.defineProperty()は主に一つのオブジェクトに属性を追加したり、属性を変更したりします.この中には三つのパラメータがあります.

Object.defineProperty(obj,prop,descriptor)

最初のパラメータはオブジェクト名で、2番目のパラメータはパラメータ名を追加する必要があり、3番目のパラメータはオブジェクトであり、追加されたパラメータについての説明です.

value  
<script>
let obj = {
      
      "name": "xsywan",
      "age": '20',
      "data": "110"
    }
Object.defineProperty(obj,'age',{
      
     value:"30",
   })
 console.log(obj);  
 //   
  Object.defineProperty(obj,"address",{
      
      value:"      ",
    })
    console.log(obj);
//   
 
script>

    、writable()  
 <script>
let obj = {
      
      "name": "xsywan",
      "age": '20',
      "data": "110"
    }
    Object.defineProperty(obj,"name",{
      
      writable:true,
    })
    obj.name = " ";
    console.log(obj);
//           
script>

enumerable()          
<script>
let obj = {
      
      "name": "xsywan",
      "age": '20',
      "data": "110"
    }
    Object.defineProperty(obj,"name",{
      
      enumerable:false,
    })
script>

configurable()                
<script>
let obj = {
      
      "name": "xsywan",
      "age": '20',
      "data": "110"
    }
    Object.defineProperty(obj,'name',{
      
      writable:true,
      configurable:false,
    });
script>

三、関数
関数には3つの定義があります.

function Fn(){} //    
let Fn= function(){}  //    
let fn = new Function("   "...,"  "); //

<script>
let fn = new Function("a", "b", "console.log(a+b)");
 fn(1,2);
 // ①        
 console.log(fn instanceof Object);
  // ②         
   console.log(fn.__proto__);
script>

四、六種類の関数の中でthisは指します.

<script>
//①      window  
    function star(){
      
      console.log(this);
    }
script>

<script>
 // ②     ,    window
    window.setTimeout(function(){
      
    console.log(this);
    },1000);
script>

<script>
    // ③      ,  window  
    (function() {
      
      console.log(this);
    })();
script>

<script>
    //④    ，      
    function Star(uname){
      
      this.uname = uname;
      console.log(this);
    }
    let ldh = new Star(" ");
script>

<script>
   // ⑤      ,      btn
    btn.onclick =function(){
      
     console.log(this);
     }
script>
``````html
<script>
    // ⑥      ,  obj  
    let obj = {
      
      "name":"dmc",
      sing:function(){
      
        console.log("dmcxhdl");
        console.log(this);
      }
   }
   obj.sing();
script>

五、アプリの使用
apply()は、①実行関数の操作を行う②thisの向きを変える役割をします.ここでは、apply()は、2つのパラメータ、1つはthis指向のオブジェクト、もう1つはパラメータの配列である.

<script>
let arr = [1, 2, 3, 4, 5];
let max = Math.max.apply(Math,arr);  //    Math.max()          
 console.log(max);
script>

六、bind()関数の使用
Bind()関数は、その中のthis方向を変えることができますが、関数は実行できません.ここで、最初のパラメータが導入されたのは、オブジェクトを指しています.2番目のパラメータは、後に入ってくるパラメータです.bind()関数を呼び出したら、変更された関数のコピーの値を返します.

<script>
function Star(){
      
      console.log(this);
    }
    let o = {
      
      "name":"dong",
      "age":"mu",
      "sex":"chen"
    }
    let f = Star.bind(o);
    f();
script>

bind()使用一


<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <button>  button>
  <button>  button>
  <button>  button>
  <button>  button>
  <button>  button>
  <script>
    let btns = document.querySelectorAll("button");
    for (let i = 0; i < btns.length; i++) {
      
      btns[i].onclick = function () {
      
        this.disabled = true;
        setTimeout(function(){
      
          this.disabled = false;
        }.bind(this),3000);
      }
    }
  script>
body>

html>

ここで、タイマー関数のコールバック関数にビッド()を使うと、この関数のthis指向を変えるためにコードをより簡潔にして、btns[i]を使わないようにします.コードの負担を増やします.
七、call()とappy()とbind()の応用シーンの違い
call()は主に継承に使用され、appy()は導入されたパラメータは配列の形が一般的であるため、いくつかの数学式に使用されてもよい.ビッド()は、thisの指向を変更しますが、関数を実行せずにタイマー関数で使用できます.
八、厳格モード
厳密なモードでは、シナリオに対しては厳格なモードがあり、関数に対しては厳格なモードがあります.両方とも冒頭に書く.以下は厳しいモードのいくつかの注意点です.

①、    ‘use strict’
②、       ，   
    // num = 10;
    // console.log(num);
③               
    // let num =10;
    // delete num;
④this     
    // function Star(){
    //   console.log(this);
    // }
    // Star();
    //         ，this    window  ，        ，    undefined
⑤    
    // function Star(uname){
    //   this.uname = uname;
    // }
    // Star("hh");  
    // console.log(uname);
    //        ，    window     ，        ，    undefined
      //       ，       this  window,            
⑥、        
      //  、      ，              
      // let a = 2;
      // a = 4;
      // function Fn(a,a){
      //   console.log(a+a);
      // }
      // Fn(2,4);
      //  、

九、高次関数
高次関数:私たちが定義した関数です.関数もデータの種類ですので、パラメータとして関数に伝達することもできます.これを高次関数と呼びます.もう一つの場合、一つの関数でreturnリターン関数を使用すると、この関数は高次関数とも呼ばれます.

<script>
function Fn(a,b,callback){
      
        console.log(a+b);
        callback && callback();
      }
      Fn(3,4,function(){
      
        console.log("               ");
      })
script>

十、閉め切ってください
クローズド:他の作用領域の変数に作用領域が訪問されるとき、アクセスされる関数はクローズド関数です.

<script>
 function Star(){
      
    let num = 10;
    function St(){
      
    console.log(num);
 };
     St();
  }
 Star();
script>

ここでスター関数を呼び出すとSte()は自動的に実行されます.作用ドメインチェーンのためにnumの値にアクセスできます.最終的に10を印刷します.ここでは閉パックに関連しています.consolie.log(num)を実行すると、Str()関数のスコープから変量numを探すことができます.このスター関数はクローズド関数です.

<script>
function Star(){
      
          let num = 10;
          return function(){
      
            console.log(num);
          }
        }
        let f = Star();
        f();
script>

ここでは直接にこの関数を返して、外で実行します.ここでは上のような使い方があります.スター関数が実行された後、破壊されませんでした.中の関数は実行されていませんので、fはスター()を指します.内部の関数は、作用ドメインチェーンのために、numの値にアクセスできます.最終的に実行されました.この時、thisはwindowを指します.彼は普通の関数です.
小さいケースを閉じて、すぐに関数を実行します.


<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <div>
    <ul class="menu">
      <li>javascript      li>
      <li>node    li>
      <li>python      li>
      <li>javascript      li>
      <li>javascript    li>
    ul>
  div>
  <script>
    let lis = document.querySelector(".menu").querySelectorAll("li");
    // for(var i =0 ;i
    //   lis[i].οnclick=function(){
      
    //     console.log(i);
    //   }
    // }
    //          5,   ：   for   ，    li           ，  for  
    //  i     5,                ，       5

    // for (var i = 0; i < lis.length; i++) {
      
    //   lis[i].index = i;
    //   lis[i].onclick = function () {
      
    //     console.log(this.index);
    //   }
    // }


    //            
    for (var i = 0; i < lis.length; i++) {
      
      (function(i){
      
        lis[i].onclick=function(){
      
          console.log(i);
        }
      })(i);
    }

    //         ，       for  ，  5       ，
    //         ，           ，          i，        li         
    //       ，    ，   i         i,        、

  script>
body>

html>

クローズドケース2:タイマー


<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <ul class="menu">
    <li>javascript      li>
    <li>node    li>
    <li>python      li>
    <li>javascript      li>
    <li>javascript    li>
  ul>
  <script>
    //          
    let lis = document.querySelectorAll('li');
    // for(var i =0;i
    //   setTimeout(function(){
      
    //     console.log(lis[i].innerHTML);
    //   },3000)
    // }
    //       ，   :     function         ，          ，i    5，
    //              ，i 5   innerHTML  。


    //                 
      for(var i =0;i<lis.length;i++){
      
        (function(i){
      
          setTimeout(function(){
      
            console.log(lis[i].innerHTML);
          },3000)
        })(i)
      }
  script>
body>

html>

クローズドを使ってタクシーの問題を計算します.


<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <script>
    let send = (function () {
      
      let total = 0;
      let start = 13;
      return {
      
        total(n) {
      
          if (n <= 3) {
      
            return total = start;
          }
          else {
      
            return total = (n - 3) * 5 + total;
          }
        },
        yd(flag) {
      
          return flag ? total + 10 : total;
        }
      }
    })()
    console.log(send.total(10));
    console.log(send.yd(true));

    console.log(send.total(3));
    console.log(send.yd(false));
  script>
body>

html>

思考問題:

<script>
var name= "The Window";
        var object ={
      
          name:"My Object",
          getNameFunc:function(){
      
            return function(){
      
              return this.name;
            }
          }
        }
        console.log(object.getNameFunc()());  //The Window
script>

ここでobject.get NameFnc()を得て、function(){return this.name])を実行して、普通の関数で、一つの普通の関数のthisはwindowを指して、この時にthisをプリントアウトして、nameはthe windowで、この中は閉じているカバンがありません.

<script>
var name= "The Window";
        var object ={
      
          name:"My Object",
          getNameFunc:function(){
      
            var that = this;
            return function(){
      
              return that.name;
            }
          }
        }
        console.log(object.getNameFunc()());  //My Object
script>

ここの前は同じですが、get NameFun()を呼び出したとき、thisはthatに割り当てられます.このときthisはobjectを指し、クローズド操作を実現します.だから最終的には「My Object」と表示されます.2020年1月7日にまとめます.

cノートを復習する