고 품질 JS 코드 를 만 드 는 68 가지 효과 적 인 방법 (8)

[20141227] 고 품질 JS 코드 를 작성 하 는 68 가지 효과 적 인 방법 (8)

NO. 36, 인 스 턴 스 상태 만 인 스 턴 스 대상 에 저장
Tips：

가 변 데 이 터 를 공유 하 는 데 문제 가 생 길 수 있 습 니 다. 원형 은 모든 인 스 턴 스 에 의 해 공유 되 기 때 문 입 니 다

가 변 적 인 인 인 스 턴 스 를 인 스 턴 스 대상 에 저장 합 니 다

일반적으로 원형 속성 이 가리 키 는 대상 은 모든 실례 가 공유 되 기 때문이다.따라서 원형 이 가리 키 는 대상 에 공유 데 이 터 를 저장 하 는 것 을 권장 하지 않 습 니 다.다음은 간단 한 예 를 드 리 겠 습 니 다.

var Person = function(name){

    this.name = name;

};

Person.prototype = {

    children: [],

    addChild: function(childName){

        this.children.push(childName);

    },

    getChildren: function(){

        return this.children;

    }

};



var p1 = new Person('P1');

var p2 = new Person('P2');

p2.addChild('P2_C1');

console.log(p1.getChildren());

결과 가 비교적 뚜렷 하 다.p2 의 아이 가 p1 이 되 었 다.표준 방법 은 children 을 인 스 턴 스 대상 에 저장 하 는 것 이다.

var Person = function(name){

    this.name = name;

    this.children = [];

};

Person.prototype = {

    addChild: function(childName){

        this.children.push(childName);

    },

    getChildren: function(){

        return this.children;

    }

};

No. 37 、 this 변수의 암시 적 바 인 딩 문 제 를 인식 합 니 다.
Tips：

this 변수의 역할 영역 은 항상 최근 의 폐쇄 함수 가 확 정 됩 니 다

부분 변 수 를 사용 하여 (일반적으로 self, me, that) this 의 바 인 딩 을 내부 함수 에 사용 할 수 있 습 니 다.

낡은 규칙, 간단 한 예 를 보 자.

var testObj = {

    a1: 0,

    fun1: function(){

        function fun2(){

            console.log(this.a1);

        }

        fun2();

    }

};

testObj.fun1();

왜 이러 지?this 변 수 는 다른 방식 으로 연결 되 어 있 기 때 문 입 니 다.모든 함수 에는 this 변수의 암시 적 바 인 딩 이 있 습 니 다.this 변 수 는 최근 에 연 결 된 폐쇄 함수 입 니 다.이상 의 문제 에 대해 집중 적 인 방법 으로 처리 할 수 있 습 니 다. 다음 과 같이 참고 하 십시오.

//   this   self       

var testObj = {

    a1: 0,

    fun1: function(){

        var self = this;

        function fun2(){

            console.log(self.a1);

        }

        fun2();

    }

};

testObj.fun1();



//  call       （    apply）

var testObj = {

    a1: 0,

    fun1: function(){

        function fun2(){

            console.log(this.a1);

        }

        fun2.call(this);

    }

};

testObj.fun1();



//  bind   

var testObj = {

    a1: 1,

    fun1: function(){

        function fun2(){

            console.log(this.a1);

        }

        fun2.bind(this)();

    }

};

testObj.fun1();

No. 38. 하위 클래스 의 구조 함수 에서 부모 클래스 의 구조 함 수 를 호출 합 니 다.
Tips：

하위 구조 함수 에서 this 를 명시 적 수신 자로 서 부모 류 의 구조 함수

를 호출 합 니 다.

Object. create 함 수 를 사용 하여 하위 클래스 의 원형 대상 을 구성 하여 부모 클래스 의 구 조 를 호출 하지 않도록 합 니 다

JS 에서 이 루어 진 상속:

var Animal = function(){

    this.weight = 50;

};

Animal.prototype.eat = function(){

    console.log('eat food...');

};



var Dog = function(){

    Animal.call(this);

    Dog.prototype = Object.create(Animal.prototype);

};



var dog = new Dog();

console.log(dog.weight);

No. 39 、 부류 의 속성 명 을 중용 하지 마 세 요
Tips：

부류 가 사용 하 는 모든 속성 명 유의

하위 클래스 에서 부모 클래스 의 속성 명 을 다시 사용 하지 마 십시오

JS 에서 속성 은 모두 key - value 로 저장 되 어 있 기 때문에 같은 이름 의 속성 은 같은 주 소 를 가리 키 기 때문에 다음 코드 는:

var Animal = function(){

    this.weight = 50;

    this.id = ++Animal.nextId;

};

Animal.nextId = 0;

Animal.prototype.eat = function(){

    console.log('eat food...');

};



var Dog = function(){

    Animal.call(this);

    this.id = ++ Dog.nextId;

    Dog.prototype = Object.create(Animal.prototype);

};

Dog.nextId = 0;



var dog = new Dog();

console.log(dog.id);

두 클래스 모두 인 스 턴 스 속성 id 에 데 이 터 를 쓰 려 고 합 니 다.
No. 40 、 상속 을 피 하 는 표준 류
Tips：

계승 표준 류 는 특수 한 내부 속성 (예 를 들 어 [Class]]) 으로 인해 파괴 된다

속성 의뢰 를 사용 하여 계승 표준 류

보다 우수 합 니 다.
레이 블 라 이브 러 리 를 확장 하여 기능 을 더욱 강하 게 하 는 것 은 유혹 적 이지 만 불행 하 게 도 이들 의 정 의 는 특별한 행동 을 많이 하기 때문에 정확 한 하위 클래스 를 쓰기 어렵다.

var ArrayEx = function(){

    for(var i = 0, len = arguments.length; i<len ; i++){

        this[i] = arguments[i];

    }

};

ArrayEx.prototype = Object.create(Array.prototype);



var ar = new ArrayEx('1', '2');

console.log(ar.length) //       ？

원인 분석: length 속성 은 내부 에 '진정한' 배열 대상 으로 표시 되 어야 만 작용 합 니 다.직접 계승 한 대상 은 Array 의 태그 속성 [[Class] 을 계승 하지 않 았 습 니 다.테스트 는 다음 과 같 습 니 다:

var ar = new ArrayEx('1', '2');

console.log(Object.prototype.toString.call(ar)); //[object Object]

console.log(Object.prototype.toString.call([])); //[object Array]

ECMAScript 표준 라 이브 러 리 에서 대부분의 구조 함 수 를 제거 하 는 데 유사 한 문제 가 있 습 니 다.이 를 바탕 으로 계승 하 는 표준 클래스: Array, Boolean, Date, Function, Number, RegExp 또는 String 을 피 하 는 것 이 좋 습 니 다.
유사 한 기능 을 실현 하려 면 속성 의뢰 방식 을 사용 할 수 있 습 니 다.

var ArrayEx = function(){

    this.array = []

    for(var i = 0, len = arguments.length; i<len ; i++){

        this.array[i] = arguments[i];

    }

};

ArrayEx.prototype.forEach = function(f, thisArg){

    if(typeof thisArg === 'undefined'){

        thisArg = this;

    }

    this.array.forEach(f, thisArg);

};



var ar = new ArrayEx('1sfdfsd', '2fdsfs');

ar.forEach(function(item, i){

    console.log(item);

});

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this

18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

고 품질 JS 코드 를 만 드 는 68 가지 효과 적 인 방법 (8)

좋은 웹페이지 즐겨찾기