"this"with javascript code

나는이 js 코드를 가지고 그것을 실행한다. 완벽하게 잘 동작한다. 완전히 이해할 수 없다. 도와주세요 !! 함수 finduser에서 "this"with javascript code

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

<div class="members-wrapper"></div> 


<script> 

    var db = [ 
    {fname:"oscar", lname:"santosh", email:"[email protected]", country:"Brazil", id:101}, 
     {fname:"juan", lname:"mata", email:"[email protected]", country:"Spain", id:102}, 
    {fname:"eden", lname:"hazard", email:"[email protected]", country:"Belgium", id:103} 
    ]; 

    function CaseName(str) 
    { 
    return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); 
    }; 

    //our object with channable method 

    var cascadeVar ={ 

    user:"", 

    finduser: function(userEmail) 
    { 
     var arraylen = db.length,i; 
     for(i=arraylen-1;i>=0;i--) 
     { 
     if(db[i].email === userEmail) 
     { 
      this.user = db[i]; 
      break; 
     } 
     } 
     return this; 
    }, 

    formatname : function() 
    { 
    if(this.user){ 
     this.user.fullname = CaseName(this.user.fname) + " " + CaseName(this.user.lname); 
     } 
     return this; 
    }, 

    createLayout:function() { 
    if (this.user) { 
    this.user.viewData = "<h2>Member: " + this.user.fullname + "</h2>" + "<p>ID: " + this.user.id + "</p>" + "<p>Email: " + this.user.email + "</p>"; 
    } 
    return this; 
    }, 

    display : function() 
    { 

    if (!this.user) return; 
    $(".members-wrapper").append(this.user.viewData); 
    } 

    }; 

    cascadeVar.finduser("[email protected]").formatname().createLayout().display(); 

</script> 

</body> 
</html>

, 왜 내가 this.user = db[i];로 사용해야합니까? 사용자가 cascadeVar 객체에 속해 있고 cascadeVar를 가리키고 있기 때문입니다. "예"인 경우 "이"가 없으면 왜 작동하지 않습니까? 나는 어리석은 짓을하지만 여전히 혼란 스럽다는 것을 알고 있습니다.

this을 무시하면 finduser() 함수에서 사용자가 정의되지 않습니다.?

동일한 기능으로 돌아 오는 return this은 무엇입니까?

무엇이 return this 반환은 모든 단일 기능입니까?

도와주세요!

출처

2015-01-14 Chelsea

는'이 반환은, '모든 방법 부분은 체인 방법에 당신을 수 있습니다. –

HOW ??설명해주세요. – Chelsea

자바 스크립트에서 각 함수에는 문맥이 있습니다. 그것이 우리가 this이라고 부르는 것입니다.
기본적으로 함수의 컨텍스트는 함수입니다. 부모 개체. 예, 귀하의 가정은 맞습니다. 사용자가 cascadeVar 객체에 속하며이 객체는 cascadeVar을 가리 킵니다.

function getName() { 
 
    // what is `this` ? 
 
    return this.userName; 
 
} 
 

 
var user1 = { 
 
    userName: 'john', 
 
    getName: getName 
 
}; 
 

 
var user2 = { 
 
    userName: 'george' 
 
} 
 

 
// getName is a global function, meaning that it's parent is window 
 
// in this case, `this` will point to the window object 
 
// and `this.userName` will point to window.userName 
 
// which is undefined 
 
console.log('getName() =>', getName()); 
 

 
// user1.getName is a user1 method, meaning that it's parent is user1 
 
// in this case, `this` will point to user1 
 
// and `this.userName` will point to user1.userName 
 
// which is 'john' 
 
console.log('user1.getName() =>', user1.getName()); 
 

 
// there are other ways that we can dynamically change a function's context 
 
// look into the following function methods: `call`, `apply`, `bind` 
 
console.log('getName.call(user2) =>', getName.call(user2));

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

다른 질문에 대해서는, 모든 방법이 this 키워드를 반환 :

나는 종종 그 자체를 대변 할 수있는 코드를 발견, 그래서 예를 보자

는 this 작품을 이해하기 메서드 연쇄를 보장합니다. 이 디자인 패턴은 jQuery 라이브러리에서 널리 사용되며 부모 객체를 호출하지 않고 동일한 객체의 여러 메소드를 순차적으로 호출 할 수 있습니다.
기본적으로 a.b(); a.c(); a.d(); 대신 a.b().c().d();을 호출하는 것과 같은 통사론을 할 수 있습니다.
그리고 .. 물론, 여기에 사용 체인을 보여줍니다 코드 조각입니다 :

var calculator = { 
 
    value: 0, 
 
    add: function(n) { 
 
    this.value += n; 
 
    return this; 
 
    }, 
 
    substract: function(n) { 
 
    this.value -= n; 
 
    return this; 
 
    }, 
 
    multiply: function(n) { 
 
    this.value *= n; 
 
    return this; 
 
    } 
 
}; 
 

 
calculator 
 
    .add(6) 
 
    .substract(2) 
 
    .multiply(2) 
 
    .add(3) 
 
    .substract(5); 
 

 
console.log('(6 - 2) * 2 + 3 - 5 = ', calculator.value);

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

출처

2015-01-14 08:06:27

'this'를 반환하는 모든 메소드가 어떻게 채널링을 보장합니까? – Chelsea

필자의 예제에서,'add' 함수가'this'를 리턴하면 실제로는 부모 :'calculator'를 리턴합니다. 그래서 기본적으로, 계산 된 후에 함수는'calculator' 값을가집니다 :'calculator.add (1) === calculator'. –

자바 스크립트이는 JS 인터프리터 동적 변수는 findUser 함수

로 범위로 사용자 이해할 것이다 없이는

(이 경우 cascadeVar에서) 현재 함수의 소유자 객체를 의미 각각의 경우에 이은 현재 함수, 즉 cascadeVar의 소유자를 반환합니다.

원래 작성자는 방법이 '가동 가능'(예 : 체인 연결 가능)이라는 단서를 제공했습니다. 내부적으로 cascadeVar 객체를 반환함으로써이 함수는 재귀 함수 호출을 허용합니다.

출처

2015-01-14 07:48:45

답변

관련 문제