JavaScript의 클로저, 프로토타입, 익명 함수를 배우기 위한 여정

이 글에서는 예시를 통해 JavaScript 클로저, 프로토타입, 익명 함수를 소개합니다. 자세한 내용은 아래를 참조하세요.

1. 클로저에 대하여

클로저를 이해하는데 필요한 지식

1. 예제 1:

var n =99; //建立函数外的全局变量
function readA(){
  alert(n); //读取全局变量
}

readA() //이 함수를 실행합니다.

예제 2:

function readB(){
  var c = 9;
  function readC(){
    console.log(c); //ok c可见
  }
  return readC;
}
alert(c); //error c is not defined.

참고: 함수 내에서 변수 c를 선언할 때는 반드시 var를 추가해야 합니다. 그렇지 않으면 c는 전역 변수가 됩니다.

그래서 전역 변수는 함수 내에서 표시됩니다. , 함수 내의 지역 변수는 외부 세계에 보이지 않습니다

js의 범위는 연결되어 있습니다. 상위 개체의 변수는 항상 하위 개체에 표시되지만 하위 개체의 개체는 상위 개체에 표시되지 않습니다. object

함수 내에서 내부 변수를 가져오려는 경우

예 3이 있습니다.

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC();
}
readB();

클로저는 매우 유사하며 변형은 다음과 같습니다. 이를 바탕으로 제작되었습니다.

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC;
}
var res = readB();
res();

참고:

1. 클로저를 주의해서 사용하고 메모리 사용량에 주의하세요. 상위 함수의 상태를 저장합니다

2. 상위 함수의 내부 변수 값을 임의로 변경하지 마세요

클로저 이해

참고: 실행 시 이를 포함하는 함수가 속한 객체를 나타냅니다.

예1:

var name = "The Window";

var object = {
  name : "My Object",

　　getNameFunc : function(){  //此时this (这个执行函数)是属于object对象的,是object对象下的一个属性的值
　　  return function(){   //此时this (这个执行函数)是一个匿名函数,从根对象window生成,是属于window
　　　　  return this.name;
　　　　};
　　}
};
console.log(object.getNameFunc()()); //the window

예 2:

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

2. 익명함수 익명함수를 직접 정의한 후 호출 익명 함수. 이 형식은 jquery 플러그인 정의에서 매우 일반적입니다.

1. 함수 알파벳 메서드 전달 먼저 익명 함수를 선언한 다음 실행합니다

( function(){
  console.log('excute self');
}) ();

2. 표현식의 우선순위를 정하면 자바스크립트는 표현식을 실행하기 때문에 괄호 안에서 바깥쪽으로 가므로 괄호를 이용해서 선언된 함수를 강제로 실행할 수 있다.

(
  function () {
    alert(2);
  }
  ()
);

3. void 연산자 void 연산자를 사용하여 실행 괄호로 묶지 않은 단일 피연산자

void function(){ console.log('void') } ();

3. 프로토타입에 대하여

프로토타입 프로토타입

js의 프로토타입을 이해하려면 먼저 js의 객체 지향 설계를 이해해야 합니다

function People(name){
  this.name = name;

  console.log(this); //Window 或者 object { name: 'xxx' }
  this.introduce = function(){  //实例对象方法
    console.log(this.name);
  }
}
new People('leon').introduce();
//这里有一个非常有趣的现象,结合前面的来看的话,
//首先function people里的this指向的默认是Window对象
//当 调用 People();时 this 输出为 Window对象
//但一旦调用new People('xx')时, this 输出为 {name:'xx'}
//其实也很好理解,一旦new ,便新建了一个对象

인스턴스 객체 메소드는 다음과 같을 수 있습니다. new People('leon').introduce()는 정적 메소드를 호출합니다.

var People = {}; //等于一个对象 {} 或者 function 数组都可以 此时People需要是引用类型
People.sayhi = function(to_who){
  console.log('hi '+ to_who);
}
People.sayhi('lee'); //调用时这样调用

클래스 객체의 프로토타입 메소드

사용하기 전에 초기화해야 하기 때문입니다.

var People = function(){};       // People 必须为一个 function(){} 即为一个类,不能是对象或值类型或其他引用类型
People.prototype.meet = function(meet_who) {
  console.log('I am '+this.name + ',going to meet ' + meet_who);
};
new People('lee').meet('xx');

프로토타입 메서드는 이 클래스의 개체에서만 호출할 수 있습니다.

A.prototype = new B();

프로토타입 상속과 많이 비슷해 보이지만 그렇지 않습니다. 클론에 가깝고 더 정확합니다

상위 클래스와 하위 클래스에 같은 이름의 속성이 있으면 근접성 원칙을 적용합니다. 찾을 수 없으면 한 번에 한 레벨씩 올라갑니다. .Find, 상사를 호출하는 속성을 지정하려면 호출 방법을 사용하십시오

extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);
obj1.func.call(obj);

위 내용은 JavaScript 클로저, 프로토타입 및 익명 함수를 학습하는 여정입니다. 편집자가 공유한 내용입니다. 더 많은 관련 튜토리얼을 보려면

JavaScript 비디오 튜토리얼

을 방문하세요.