JS에서 상속을 구현하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

이번에는 JS에서 상속을 구현하는 방법과 JS에서 상속을 구현할 때 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

우리 모두는 객체 지향의 세 가지 주요 특징이 캡슐화, 상속 및 다형성이라는 것을 알고 있습니다. 캡슐화는 속성 및 메서드를 사유화하는 것에 지나지 않으므로 JS에서는 개인 속성과 개인 메서드를 제공합니다. JS에는 다형성이 없으므로 JS는 객체 지향 언어가 아니라 객체 기반 언어라고 말합니다. 따라서 객체지향의 세 가지 주요 특징 중 JS에서 가장 중요한 것은 상속입니다.

1. 상속의 기본 개념

하위 클래스를 사용하여 다른 상위 클래스를 상속하면 하위 클래스가 상위 클래스의 속성과 메서드를 자동으로 가질 수 있습니다.

>>>상속의 두 당사자는 두 클래스 사이에서 발생합니다.

따라서 소위 상속은 하위 클래스가 상위 클래스의 모든 속성과 메서드를 갖도록 하는 것에 지나지 않습니다. 따라서 JS에서는 이 단계를 시뮬레이션해야 하며 이를 달성하는 세 가지 일반적인 방법이 있습니다.

상속을 구현하기 위해 Object의 프로토타입을 확장하고, 상속을 구현하기 위해 호출 및 적용을 사용하고, 상속을 구현하기 위해 프로토타입을 사용합니다.

2. 상속을 구현하기 위해 객체의 프로토타입을 확장합니다

상속을 실현하기 위해 Object를 확장하는 핵심은 순회 루프를 통해 상위 클래스의 모든 속성과 메서드를 하위 클래스에 하나씩 복사하는 메서드를 직접 작성하는 것입니다.

자세한 단계는 다음과 같습니다:

1: 상위 클래스 정의

functionParent(){}

2：定义子类

funtion Son(){}

3：通过原型给Object对象添加一个扩展方法。

Object.prototype.customExtend =function(parObj){
for(variinparObj){//通过for-in循环，把父类的所有属性方法，赋值给自己
this[i] =parObj[i];
}
}

로그인 후 복사

4：子类对象调用扩展方法

Son.customExtend(Parent);

三、使用call和apply实现继承

首先，要使用这种方式显示继承，我们再来回顾一下call和apply两个函数的作用：

call和apply：通过函数名调用方法，强行将函数中的this指向某个对象；

call写法：func.call(func的this指向的obj,参数1,参数2...);

apply写法：func.apply(func的this指向的obj,[参数1,参数2...]);

那么，我们使用这两个函数实现继承的思路就是：在子类中，使用父类函数调用call或apply，并将父类的this，强行绑定为子类的this。那这样，父类绑定在this上的属性和方法，不就顺利成章的绑定到子类的this上了吗？

详细步骤如下：

1：定义父类

funtion Parent(){}

2：定义子类

functionSon(){}

3：在子类中通过call方法或者apply方法去调用父类。

functionSon(){
Parent.call(this,....);//将父类函数中的this，强行绑定为子类的this}

로그인 후 복사

四、使用原型实现继承

使用原型实现继承，是比较简单而且比较好理解的一种，就是将子类的prototype指向父类的对象就可以啦。

详细步骤如下：

1：定义父类

functionParent(){}

2：定义子类

functionSon(){}

3：把在子类对象的原型对象声明为父类的实例。

Son.prototype =newParent(); 2: 하위 클래스 정의

함수 Son(){} 3: 프로토타입을 통해 Object 개체 에 확장 메서드를 추가합니다. rreee

4: 서브클래스 객체는 확장 메서드를 호출합니다

Son.customExtend(부모);

3. 상속을 구현하려면 호출 및 적용을 사용하세요🎜🎜🎜🎜 먼저 이 메서드를 사용하여 상속을 표시하기 위해 호출 및 적용 기능을 검토해 보겠습니다. 🎜🎜 호출 및 적용: 함수 이름을 통해 메서드를 호출하여 함수에서 이 메서드가 객체를 가리키도록 합니다. 호출 작성 방법: func.call(func, 매개변수 1, 매개변수 2...에서 이를 가리키는 obj);🎜🎜 적용 작성 방법: func.apply(func의 이것으로 가리키는 obj, [매개변수 1, 매개변수 2...]);🎜🎜 그런 다음 이 두 함수를 사용하여 상속을 구현한다는 우리의 아이디어는 하위 클래스에서 상위 클래스 함수를 사용하여 호출 또는 적용을 호출하고 상위 클래스의 this를 하위 클래스의 this에 강제로 바인딩하는 것입니다. 이 경우 부모 클래스의 this에 바인딩된 속성과 메서드가 하위 클래스의 this에 성공적으로 바인딩되지 않습니까? 🎜🎜 🎜🎜자세한 단계는 다음과 같습니다. 🎜🎜🎜🎜 1: 상위 클래스 정의🎜🎜 Function Parent(){}🎜🎜 2: 하위 클래스 정의🎜🎜 functionSon(){}🎜🎜 3: 서브클래스의 call 메소드나 apply 메소드를 통해 상위 클래스를 호출합니다. 🎜rreee🎜 🎜🎜4. 프로토타입을 사용하여 상속 구현🎜🎜🎜🎜 프로토타입을 사용하여 상속을 구현하는 것은 상대적으로 간단하고 이해하기 쉽습니다. 하위 클래스의 프로토타입이 상위 클래스의 객체를 가리키도록 하면 됩니다. 🎜🎜 자세한 단계는 다음과 같습니다: 🎜🎜 1: 상위 클래스 정의🎜🎜 functionParent(){}🎜🎜 2: 하위 클래스 정의🎜🎜 functionSon(){}🎜🎜 3: 하위 클래스 객체의 프로토타입 객체를 상위 클래스의 인스턴스로 선언합니다. 🎜🎜 Son.prototype =newParent();🎜🎜 🎜🎜5. 폐쇄🎜🎜🎜🎜 클로저를 이해하려면 먼저 JS의 범위를 이해해야 합니다. 🎜🎜 1. JS의 범위🎜🎜 전역 변수: 함수 외부에서 선언된 변수🎜

局部变量：函数内声明的变量

在JS中，函数为唯一的局部作用域，而if、for等其他{}没有自己的作用域

所以，函数外不能访问局部变量。其实，变量在函数执行完毕以后，占用的内存就会被释放。

2、闭包

在概述中，我刚刚提到，面向对象的三大特征中的“封装”，我们可以用函数的私有属性来实现。这个私有属性，其实也就是局部变量。

但是我们都知道，封装是限制外部的访问，并不是直接拒绝外部的访问，那么我们在函数中私有的属性，怎么才能在外部访问呢？答案就是闭包！

JS中，提供了一种"闭包"的概念：在函数内部，定义一个子函数，可以用子函数访问父函数的私有变量。执行完操作以后，将子函数通过return返回。

代码示例：

functionfunc2(){varnum = 1;functionfunc3(){varsum = num+10;
alert(sum);
}returnfunc3;
}varf =func2();
f();

로그인 후 복사

3、闭包的作用：

① 访问函数的私有变量；

② 让函数的变量始终存在于内存中，而不被释放。

4、闭包的典型应用

我们来做这样一个功能：页面中有6个li，要求实现点击每个li，弹出这个li对应的序号。

HTML代码很简单：

那JS代码呢？我觉得很大一部分同学会这样写：

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[i].onclick=function(){
alert("您/点击了第"+i+"个li！");
}

로그인 후 복사

那么，这样对吗？不对！！！我们来分析一下：页面加载的时候，JS代码会全部执行，也就是上面的for循环在页面加载完就已经执行完了！那，这个i就已经变成了lis.length。也就是说，你在点击li的时候，无论点击第几个，弹出的都是lis.length。

那么，我们应该怎么修改呢？看代码！

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[j].onclick=function(){
alert("您/点击了第"+j+"个li！");
}
}();
}

로그인 후 복사

区别在哪？明眼人一眼就看穿我们在for循环外面嵌套了一层自执行函数！这种函数套函数的形式，就形成了闭包！

那作用呢？我们刚才强调，闭包的自执行函数会有自己的作用域。在函数里面的代码没有执行的时候，自执行函数中的j是不会被释放掉的！

也就是说，循环转了6次！生成了6个独立的函数空间，每个空间中有自己独立的j变量，所以最终不会出现所有li点击都是lis.length的情况！

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！