예제와 함께 JavaScript 생성자 및 프로토타입에 대한 자세한 설명

이 글은 생성자와 프로토타입에 관련된 이슈를 주로 소개하는 JavaScript에 대한 지식과 프로토타입 관련 내용을 함께 살펴보도록 하겠습니다.

【관련 권장사항: JavaScript 동영상 튜토리얼, 웹 프론트엔드】

1. 생성자 및 프로토타입

1.1 프로토타입을 사용하여 메모리 낭비 문제 해결

단점 : 메모리 낭비가 있다는 문제,

객체가 2개 이상 있으면 복잡한 데이터형의 공간이 여러번 열리게 됩니다

생성자 프로토타입prototype 프로토타입 객체는 주로 메모리 낭비 문제를 해결합니다. 프로토타입을 통해 생성자가 할당한 함수는 모든 객체에서 공유됩니다. JavaScript의 모든 생성자에는 다른 객체를 가리키는 프로토타입 속성이 있습니다. 이 프로토타입은 객체이며 프로토타입 객체의 모든 속성과 메서드는 생성자의 소유입니다. 이때 프로토타입을 이용하여 해당 객체의 모든 인스턴스 객체에서 사용할 수 있는 메소드를 넣을 수 있습니다.

Object 프로토타입

_ proto_

Object Objects에는 _ proto_ 속성이 있어 생성자의 프로토타입 프로토타입 개체를 가리킵니다. 생성자 프로토타입 프로토타입 객체의 속성과 메서드는 객체에

_ proto_ 프로토타입이 있기 때문입니다. sy의 _ proto_와 Sym의 _ proto_는 동일한 메소드 검색 규칙입니다. 먼저 sy를 확인하고 Sym 객체에 sing 메소드가 있는지 확인하세요. 그렇다면 _ _ proto_가 있으므로 이 객체에 sing 메소드를 실행하세요. _, 생성자 프로토타입 객체 Prototype이 존재하는 곳으로 가서 생성자 프로토타입 객체 Prototype으로 가서 sing 메소드를 찾습니다. 프로토타입 객체) 함수와 객체가 생성되면 속성이 자동으로 생성됩니다. 둘 다 동일한 빈 객체

1.2 생성자 생성자 생성자 생성자객체 프로토타입(_

proto

_) 및 생성자(프로토타입)는 둘 다 프로토타입 객체 A 속성

constructor

속성에 있습니다. 생성자는

생성자 자체를 다시 가리키므로 생성자라고 합니다.

둘 다 생성자를 가지고 있습니다. 프로토타입이 객체 형태로 추가되면 프로토타입 포인터가 변경되어 새로운 프로토타입 객체를 가리킵니다. 잠시만 기다려 주세요

2. 프로토타입 체인

2.1 js의 멤버 검색 규칙

객체의 속성(메서드 포함)에 접근할 때 먼저 객체 자체에 속성이 있는지 확인하세요. 그렇지 않은 경우 프로토타입(즉, ._ proto _가 가리키는 프로토타입 프로토타입 객체)을 검색합니다. 아직 존재하지 않는다면 프로토타입 객체(Object의 프로토타입 객체)의 프로토타입을 찾으세요. 그리고 개체가 발견될 때까지(null) 계속됩니다.

2.2 생성자에서 this가 가리키는 프로토타입 개체는 shanyu

<script>
        function Person(uname, uage) {
            this.uname = uname;
            this.uage = uage;
        }
        // 声明一个变量然后验证this指向是不是和实例化对象相同
        var that;
        Person.prototype.skill = function () {
            console.log(&#39;我会吃饭&#39;);
            that = this;
        }
        var shanyu = new Person(&#39;山鱼&#39;, 30);
        shanyu.skill();
        console.log(that === shanyu);
    </script>

2.3 내장 개체를 확장합니다.

프로토타입 개체를 사용하여 수정할 수 있습니다. 원래 내장 개체 사용자 정의 메서드를 확장합니다.

 <script>
        //  自定义对象应用，给Array添加一个自定义方法
        Array.prototype.sum = function () {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum += this[i];
            }
            return sum;
        }
        var arr = [1, 2, 3, 4];
        console.log(arr.sum());
    </script>

내장 배열 및 문자열 개체는 Array.prototype = {} 작업으로 프로토타입 개체를 덮어쓸 수 없습니다. Array.prototype.name = function(){}만 가능합니다.

3.call function

이 함수를 호출하고 함수가 실행 중일 때 this 포인터를 수정합니다. 세 가지 매개변수가 있습니다.

thisArg 현재 호출 함수는 arg1, arg2 등을 가리킵니다. 전달된 매개변수

    <script>
        function sing(x,y) {
            console.log("a~a~给我已被忘情水");
            console.log(this);
            console.log(x+y);
        }
        var fn = {
            name: &#39;山鱼&#39;
        }
        // call()可以改变这个函数的this指向此时这个函数的this就指向了o这个对象
        sing.call(fn,1,2)
    </script>

4. Inheritance

를 입력하면 Son이 상위 생성자에서 uname, uage를 사용함을 알 수 있습니다

4.1 프로토타입 객체 상속 사용

es6 이전에는 확장이 없었으므로

생성자와 모델 객체

의 조합을 사용하여 상속 작업을 수행할 수 있습니다

 <script>
        function Father(uname, uage) {
            this.uname = uname;
            this.uage = uage;
        }
        Father.prototype.eat = function () {
            console.log("我爱吃鸡腿");
        }
        // 子构造函数
        Son.prototype = new Father();
        Son.prototype.constructor = Son;
        function Son(uname, uage, swing) {
            Father.call(this, uname, uage);
            this.swing = swing;
        }
        Son.prototype.student = function () {
            console.log(&#39;我爱学习！！&#39;);
        }
        // 要向使用父亲原型对象里面的方法，可以实例化一下Father，然后
        // 这时候Son的this指向到了Father，所以我们要用constructor将this指回到Son
        var son = new Son(&#39;山鱼妹&#39;, 18, "游泳冠军！！！");
        // console.log(son.eat());
        console.log(son);
        console.log(Father.prototype);
    </script>

[관련 권장 사항:

JavaScript 비디오 튜토리얼

, 웹 프론트 엔드]

위 내용은 예제와 함께 JavaScript 생성자 및 프로토타입에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!