_.각각의 context(리스트, 반복기, [context])에서 context란 무엇입니까?

_.각각의 context(리스트, 반복기, [context])에서 context란 무엇입니까?

저는 언더스코어 .js가 처음입니다.입니까의 입니까?[context]인에_.each() 어떻게 사용해야 합니까?

변수는 컨텍스트 만 설정합니다.this반복기 함수에 있어요.

var someOtherArray = ["name","patrick","d","w"];

_.each([1, 2, 3], function(num) { 
    // In here, "this" refers to the same Array as "someOtherArray"

    alert( this[num] ); // num is the value from the array being iterated
                        //    so this[num] gets the item at the "num" index of
                        //    someOtherArray.
}, someOtherArray);

작업 예: http://jsfiddle.net/a6Rx4/

의 각 하여 해당 의 .someOtherArray, 로 됩니다.this상황 파라미터로 통과시켰기 때문에.

this입니다를 합니다.window물건.

---

엑스트라:

대답하기 위해서는What's the advantage of that? Why not just refer to someOtherArray[num] rather than this[num]?할 수 있는 , 익명의문하겠습니다를 iteratee재사용이 용이하도록 기능에 콜백:

const someOtherArray  = ["name","patrick","d","w"];
const yetAnotherArray = ["what","goes","here","?"];

function alertStr(num){
    alert( this[num] );
}

_.each([1, 2, 3], alertStr, someOtherArray);
_.each([1, 2, 3], alertStr, yetAnotherArray);

this 사용할 수 .iterateee에 합니다._.each이 다른 context가치.이것은 만약 우리가 그것을 가지고 있다면 작동하지 않을 것입니다.someOtherArray 안에 iteratee.

context is where is wherethis를 반복기 함수에서 참조합니다.예를 들어,

var person = {};
person.friends = {
  name1: true,
  name2: false,
  name3: true,
  name4: true
};

_.each(['name4', 'name2'], function(name){
  // this refers to the friends property of the person object
  alert(this[name]);
}, person.friends);

컨텍스트를 사용하면 통화 시 인수를 제공하여 일반적인 사전 작성 도우미 기능을 쉽게 사용자 지정할 수 있습니다.

몇 가지 예:

// stock footage:
function addTo(x){ "use strict"; return x + this; }
function pluck(x){ "use strict"; return x[this]; }
function lt(x){ "use strict"; return x < this; }

// production:
var r = [1,2,3,4,5,6,7,8,9];
var words = "a man a plan a canal panama".split(" ");

// filtering numbers:
_.filter(r, lt, 5); // elements less than 5
_.filter(r, lt, 3); // elements less than 3

// add 100 to the elements:
_.map(r, addTo, 100);

// encode eggy peggy:
_.map(words, addTo, "egg").join(" ");

// get length of words:
_.map(words, pluck, "length"); 

// find words starting with "e" or sooner:
_.filter(words, lt, "e"); 

// find all words with 3 or more chars:
_.filter(words, pluck, 2); 

제한된 예를 통해서도 재사용 가능한 코드를 만드는 "추가 인수"가 얼마나 강력한지 알 수 있습니다.상황별로 다른 콜백 기능을 만드는 대신 보통 낮은 레벨의 도우미를 적응시킬 수 있습니다.목표는 최소한의 보일러 플레이트와 함께 동사와 두 개의 명사를 묶는 사용자 정의 논리를 갖추는 것입니다.

인정하건대, 화살표 함수는 일반적인 순수 함수의 "코드 골프" 이점을 많이 없앴지만, 의미론과 일관성 이점은 여전히 남아 있습니다.

나는 항상 덧붙입니다."use strict"e를 [].map()기본값을 통과할 때의 호환성.그렇지 않으면 물체로 강제로 옮겨지는데, 이 물체는 여전히 작동하지만, 유형별로 작동하는 것이 더 빠르고 안전합니다.

_.각각의 단순한 사용

_.each(['Hello', 'World!'], function(word){
    console.log(word);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

여기에 사용할 수 있는 간단한 예가 있습니다._.each:

function basket() {
    this.items = [];
    this.addItem = function(item) {
        this.items.push(item);
    };
    this.show = function() {
        console.log('items: ', this.items);
    }
}

var x = new basket();
x.addItem('banana');
x.addItem('apple');
x.addItem('kiwi');
x.show();

출력:

items:  [ 'banana', 'apple', 'kiwi' ]

에.addItem언더스코어는 다음과 같이 여러 번 사용할 수 있습니다.

_.each(['banana', 'apple', 'kiwi'], function(item) { x.addItem(item); });

을 부르는 입니다.addItem이 물건들을 순차적으로 세 번. 하고 각 기본적으로 배열을 반복하고 각 항목에 대해 익명 콜백 함수를 호출합니다를 호출하는 콜백 합니다.x.addItem(item)은 . 합니다.addItem멤버 함수(예: 항목이 필요함)는 일종의 무의미합니다.그래서 익명의 기능을 수행하는 것보다_.each이 간접 및 호출을 피합니다.addItem직접:

_.each(['banana', 'apple', 'kiwi'], x.addItem);

하지만 이건 안에 있는 바구니처럼 작동하지 않을 겁니다addItem멤버함수this당신의 것을 언급하지 않을 것입니다.x당신이 만든 바구니.그래서 당신은 당신의 바구니를 건네줄 수 있는 옵션이 있는 것입니다.x로 사용되다[context]:

_.each(['banana', 'apple', 'kiwi'], x.addItem, x);

_.each 및 context를 사용하는 전체 예제:

function basket() {
    this.items = [];
    this.addItem = function(item) {
        this.items.push(item);
    };
    this.show = function() {
        console.log('items: ', this.items);
    }
}
var x = new basket();
_.each(['banana', 'apple', 'kiwi'], x.addItem, x);
x.show();

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

간단히 말해서, 만약 당신이 전달하는 콜백 함수가_.each어떤 용법을 써서라도this그리고 당신은 무엇이 무엇인지를 지정해야 합니다.this콜백 기능 내부를 참조해야 합니다.그런 것처럼 보일 수도 있습니다.x예를 들어보면 중복이지만,x.addItem그냥 함수일 뿐이고 완전히 관련이 없을 수도 있습니다.x아니면basket 예를 들어, 다음과 같은 다른 객체를 사용할 수 있습니다.

function basket() {
    this.items = [];
    this.show = function() {
        console.log('items: ', this.items);
    }
}
function addItem(item) {
    this.items.push(item);
};

var x = new basket();
_.each(['banana', 'apple', 'kiwi'], addItem, x);
x.show();

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

즉, 당신은 어떤 가치를 다음과 같이 묶습니다.this콜백 안에서 또는 다음과 같이 직접 바인딩을 사용할 수도 있습니다.

_.each(['banana', 'apple', 'kiwi'], addItem.bind(x));

이 기능이 어떻게 다른 언더스코어 방법으로 유용할 수 있습니까?

약간의 으로가 ,underscorejs이 콜백을 를 들어면수)를 this 해당 를 어떤 해당 를 ) 할 수 있습니다.[context]파라미터가 주된 의도입니다.언더스코어 js 문서 상단에는 다음과 같이 나와 있습니다.반복 횟수가 컨텍스트 개체에 바인딩되어 있습니다(하나가 전달된 경우).

,context. this 내부에서 each.

언더스코어 소스 코드에서 관련 방법의 소스 코드를 사용하여 설명하겠습니다.

의 ._.each아니면_.forEach는 다음과 같습니다.

_.each = _.forEach = function(obj, iteratee, context) {
  iteratee = optimizeCb(iteratee, context);

  var i, length;
  if (isArrayLike(obj)) {
    for (i = 0, length = obj.length; i < length; i++) {
      iteratee(obj[i], i, obj);
    }
  } else {
    var keys = _.keys(obj);
    for (i = 0, length = keys.length; i < length; i++) {
      iteratee(obj[keys[i]], keys[i], obj);
    }
  }
  return obj;
};

여기서 주목할 두번째 문장이 중요합니다.

iteratee = optimizeCb(iteratee, context);

여기서,context다른 됩니다.optimizeCb됩니다.iteratee나중에 부르는 거죠.

var optimizeCb = function(func, context, argCount) {
  if (context === void 0) return func;
  switch (argCount == null ? 3 : argCount) {
    case 1:
      return function(value) {
        return func.call(context, value);
      };
    case 2:
      return function(value, other) {
        return func.call(context, value, other);
      };
    case 3:
      return function(value, index, collection) {
        return func.call(context, value, index, collection);
      };
    case 4:
      return function(accumulator, value, index, collection) {
        return func.call(context, accumulator, value, index, collection);
      };
  }
  return function() {
    return func.apply(context, arguments);
  };
};

에서 알 수 , optimizeCb,한다면context그러면 통과되지 않습니다.func그대로 돌려줍니다. 만약에.context되고,다로 .

func.call(context, other_parameters);
          ^^^^^^^

func를 호출하여 메서드를 호출하는 데 사용됩니다.this그것의 맥락.그래서 언제.this됩니다 안에서 됩니다.funccontext.

// Without `context`
_.each([1], function() {
  console.log(this instanceof Window);
});


// With `context` as `arr`
var arr = [1, 2, 3];
_.each([1], function() {
  console.log(this);
}, arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

를 해 볼 수 .context자바스크립트의 마지막 선택 파라미터로 사용합니다.

언급URL : https://stackoverflow.com/questions/4946456/what-is-context-in-eachlist-iterator-context