JS 함수 해석

7090 단어 JS 함수 해석함수 대상

JS 함수 해석(내장, 객체)


상용 문법

function add(a, b) {
  return a + b;
}

add(1,2); // 3

익명 함수

var add = function(a,b) {
  return a+b;
}
add(1,2); // 3

이 코드는 앞에서 자주 사용하는 쓰기 계산 결과와 일치하지만, 함수가 하나의 대상임을 더욱 느끼게 하고, 우리는 이 대상에 이름을 지정했다.var myVar = [1,2,3]문장과 같다.우리가 이런 함수를 파견할 때, 반드시 익명 함수를 요구하는 것은 아니다.
var add = function theAdd(a, b) { return a + b; }
add(1,2) // 3

익명 방식으로 함수를 정의하는 것은 대상 프로그래밍에 매우 유용하다. 왜냐하면 우리는 익명 함수를 대상의 속성으로 만들 수 있기 때문이다.
var myObject = new Object();
myObject.add = function (a, b) {return a+b;}
//  myObject "add" 
myObject.add(1,2); //3

함수 대상


함수는 JavaScript의 특수한 형식의 객체입니다.우리는 그것을 위해 속성을 증가시킬 수 있다

객체 작성


함수를 정의할 때 JavaScript는 실제로 하나의 대상을 만듭니다. 이 대상의 이름은 함수 이름 자체입니다.이 객체의 유형은 Function입니다.
function Ball() { i = 1; }
console.log(typeof(Ball)); // function

속성 추가


객체 function을 포함하여 Object에 속성을 추가할 수 있습니다.하나의 함수를 정의하는 실질은 하나의 대상을 만드는 것이기 때문이다.
function Ball() { console.log('ball'); }
Ball.callsign = "The ball";
console.log(ball.callsign); // The ball

포인터
Function 객체에 다음과 같은 포인터를 지정합니다.
function myFunction(message) {
  console.log(message)
}
var ptr = myFunction;
prt("Hello"); // Hello

우리는 이 함수를 운행하는데, 마치 이 함수 이름이 바늘로 대체된 것과 유사하다.그래서 위에서 이 줄 ptr("hello")와 myFunction("hello")의 효과가 일치합니다.함수를 가리키는 바늘은 대상을 대상으로 프로그래밍하는 데 상당히 유용하다.예를 들어, 여러 객체가 동일한 함수를 가리키면 다음과 같습니다.
function myFunction() { console.log(myFunction.initalName); }
myFunction.initalName = "Adu03";
var ptr1 = myFunction;
var ptr2 = myFunction;
ptr1(); // Adu03
ptr2(); // Adu03
myFunction.initalName = 'new Adu03';
ptr1(); // new Adu03
ptr2(); // new Adu03

우리가 함수를 만든 후에 그것을 다시 분배할 때, 우리는 함수 자체를 가리켜야 한다. 함수의 바늘이 아니라, 함수를 보존해야 한다면, 함수를 바꾸기 전에 함수 자체에 바늘을 분배할 수 있다.
function myFunction() { console.log("old"); }
var savefunction = myFunction;
myFunction = function() { console.log("new"); }
myFunction(); // new
savefunction(); // old

내장 함수


너는 내부에서만 플러그인 함수를 호출할 수 있다.내장 함수는 컴파일되지만, 호출할 때만 실행됩니다.
function calculate(n) { return n/3; }
function getHalfOf(n1, n2, n3) {
  function calculate(n) { return n/2; }
  var result = "";
  result += calculate(n1) + " ";
  result += calculate(n2) + " ";
  result += calculate(n3) + " ";
  return result;
}
var resultString = getHalfOf(10, 20, 30);
console.log(resultString); // 5 10 15

위의 예에서 컴파일러는 먼저 국부 메모리 주소를 검색하기 때문에 내장된calculate 함수를 찾을 수 있습니다. 만약 우리가 국부 함수를 삭제한다면 이 코드는 전체적인calculate 함수를 호출할 것입니다.

함수: 데이터 형식 및 구조 함수


우리는 함수의 또 다른 특수 기능을 보았는데, 이것은 함수를 다른 대상과 판이하게 다르게 한다.하나의 함수는 데이터 형식의 청사진으로 쓸 수 있다.이 기능은 사용자 정의 데이터 형식 (user defined data type) 을 시뮬레이션하기 위해 대상 프로그래밍에 사용됩니다.사용자 정의 데이터 형식으로 만든 대상은 일반적으로 사용자 정의 대상입니다 (user defined object)

데이터 형식


함수를 정의한 후에, 우리도 동시에 새로운 데이터 형식을 만들었다.이 새로운 데이터 형식은 새로운 대상을 만드는 데 사용할 수 있습니다.다음은 Ball이라는 새로운 데이터 형식을 만듭니다
function Ball(message) {
  console.log(message)
}
var ball0 = new Ball("creating new ball");
// creating new ball
ball0.name = "adu03" //  
console.log(ball0.name);

그러고 보니 ball0=new Ball()는 무엇을 했나요?새 키워드는 Object 유형의 새 객체(ball0)를 만듭니다.그리고 Ball () 을 실행하고 이 인용을 ball0 (대상의 호출에 사용) 에 전달합니다.위 코드는 아래 코드의 약자이다
function Ball(message) { console.log(message) }
var ball0 = new Object();
ball0.construct = Ball;
ball0.construct("creating new ball"); //  ball0.Ball
ball0.name = 'adu03';
console.log(ball0.name);

this 키워드 속성 증가


this 키워드를 사용하여this 함수를 호출하는 대상
function Ball(message, specifiedName) {
  console.log(message);
  this.name = specifiedName;
}
var ball0 = new Ball("creating new Ball", "Soccer Ball");
ball0.name;

구조 함수를 실행하는 new 키워드입니다.위의 예에서 Ball (creating new Ball, Soccer Ball) 을 실행합니다.this 키워드는ball0을 가리키기 때문에this.name=specifiedName이ball0이 되었습니다.name="Soccer Ball".함수도 하나의 대상이다.하나의 함수를 하나의 대상의 속성으로 삼을 수 있다.다음은 getSalary와 addSalary 두 함수를 추가합니다.
function Employee(name, salary) {
  this.name = name;
  this.salary = salary;
  this.addSalary = addSalaryFunction;
  this.getSalary = function() {
    return this.salary;
  }
}
function addSalaryFunction(addition) {
  this.salary = this.salary + addition;
}
var boss=new Employee("John", 200000); 
var boss2=new Employee("Joan", 200000); 
var boss3=new Employee("Kim", 200000);

더 많은 실례를 만들 때(boss2, boss3) 모든 실례는 get Salary 코드의 복사본을 가지고 있다.addSalary는 같은 곳(즉 addSalaryFunction)을 가리키며 다음과 같이 위의 코드를 수정합니다.
boss1.getSalary.owner = "boss1";
boss2.getSalary.owner = "boss2";
console.log(boss1.getSalary.owner); // boss1
console.log(boss2.getSalary.owner); // boss2
//  ， addSalary 
boss1.addSalary.owner = "boss1";
boss2.addSalary.owner = "boss2";
console.log(boss1.addSalary.owner); // boss2
console.log(boss2.addSalary.owner); // boss2

위 코드의 결론은 다음과 같습니다.
  • 대상을 저장하기 위해 더 많은 저장 공간이 필요하다
  • 이 대상을 구성하는 데 더 많은 시간이 필요하다. 이 예시를 다시 쓰면 다음과 같다. 
    function Employee(name, salary) {
this.name = name;
this.salary = salary;
this.addSalary = addSalaryFunction;
this.getSalary = getSalaryFunction;
}
function getSalaryFunction() {
return this.salary;
}
function addSalaryFunction(addition) {
this.salary = this.salary +  addition;
}
    이렇게 하면 공간을 절약하고 구조 시간을 단축할 수 있다.

    프로토타입

    모든 구조 함수에는 원형(prototype)이라는 속성이 있다.이 속성은 특정한 클래스에 통용되는 변수와 함수에 매우 유용하다.프로토타입 속성을 명확하게 설명할 필요가 없습니다. 모든 구조 함수에 프로토타입 속성이 존재하기 때문입니다. 
    function Test() {}
console.log(Test.prototype) // Object
    위에서 프로토타입 속성은 하나의 대상이기 때문에 속성을 추가할 수 있습니다.프로토타입에 추가된 속성은 이 구조 함수에 의해 만들어진 대상의 일반적인 속성이 될 것입니다. 
    function Fish(name, color) {
this.name = name;
this.color = color;
}
Fish.prototype.livesIn = "water";
Fish.prototype.price = 20;
var fish1 = new Fish("mackeral", "gray");
var fish2 = new Fish("goldfish", "orange");
var fish3 = new Fish("salmon", "white");
    모든 물고기가 livesIn과 price 띠를 가지고 있는 것을 보았습니다. 우리는 심지어 각기 다른 물고기에 대해 이 속성을 설명하지 않았습니다.하나의 대상이 생성될 때, 이 구조 함수는 그 속상prototype에 새 대상의proto에 값을 부여하기 때문이다.이 프로토는 이 대상에 의해 속성을 찾습니다.프로토타입으로 대상에 함수 추가 
    function Employee(name, salary) {
this.name = name;
this.salary = salary;
}
Employee.prototype.getSalary = function getSalaryFunction() { return this.salary; }
Employee.prototype.addSalary = function addSalaryFunction(addSalary) { return this.salary = this.salary+addSalary }
boss1 = new Employee("Joan", 20000) // 20000
boss2 = new Employee("Kim", 30000) // 30000
    get Salary나add Salray를 실행할 때, 이 대상은 프로토에서 코드를 찾아서 실행합니다.

    • 참조 주소:https://www.jb51.net/article/97767.htm
    Asseet Bundle 샘플을 만들 때의 노트
    ES6에서 쓴 class를 Jest로 테스트

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage