js 에서 계승 하 는 몇 가지 용법 apply, call, prototype

6077 단어 JavaScriptjscallapplyprototype
1. js 대상 상속
js 에는 세 가지 계승 방식 이 있다.
1, js 원형 (prototype) 계승 실현
<html> <body> <script type="text/javascript"> function Person(name,age){ this.name=name; this.age=age; } Person.prototype.sayHello=function(){ alert("      Name："+this.name); } var per=new Person("   ",21); per.sayHello(); //  ：      Name:    function Student(){} Student.prototype=new Person("   ",21); var stu=new Student(); Student.prototype.grade=5; Student.prototype.intr=function(){ alert(this.grade); } stu.sayHello();//  ：      Name:    stu.intr();//  ：5 </script> </body> </html>

2. 구조 함수 계승 실현
<html>
<body>
<script type="text/javascript">
	function  Parent(name){
		this.name=name;
		this.sayParent=function(){
			alert("Parent:"+this.name);
		}
    }

    function  Child(name,age){
		this.tempMethod=Parent;
		this.tempMethod(name);
		this.age=age;
		this.sayChild=function(){
			alert("Child:"+this.name+"age:"+this.age);
		}
    }

    var parent=new Parent("   ");
    parent.sayParent(); //  ：“Parent:   ”
    var child=new Child("  ",24); //  ：“Child:   age:24”
    child.sayChild();
</script>
</body>
</html>

3. call, apply 상속 실현
<html>
<body>
<script type="text/javascript">
	function  Person(name,age,love){
		this.name=name;
		this.age=age;
		this.love=love;
		this.say=function say(){
			alert("  ："+name);
		}
    }
	
    //call  
    function student(name,age){
		Person.call(this,name,age);
    }
	
    //apply  
    function teacher(name,love){
		Person.apply(this,[name,love]);
		//Person.apply(this,arguments); //        ，arguments
    }
	
    //call aplly   ：
	//1,     this   ,     
	//2,        ：call          ；apply      （arguments   ）
	
    var per=new Person("   ",25,"   "); //  ：“   ”
    per.say();
    var stu=new student("  ",18);//  ：“  ”
    stu.say();
    var tea=new teacher("  ",16);//  ：“  ”
    tea.say();
 
</script>
</body>
</html>

2. 콜 과 apply 의 용법 (상세 소개)
js 에서 call 과 apply 는 모두 계승 을 실현 할 수 있 습 니 다. 유일한 매개 변 수 는 다 릅 니 다. func. call (func 1, var 1, var 2, var 3) 에 대응 하 는 apply 표기 법 은 func. application (func 1, [var 1, var 2, var 3] 입 니 다.JS 매 뉴 얼 에서 콜 에 대한 설명:
call   
               ，            。

    call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

      
    thisObj
       。           。

    arg1, arg2,  , argN
       。          。

      
    call                    。call                           thisObj       。

           thisObj   ，   Global       thisObj。

   간단하게 말하자면 이 두 함수 의 역할 은 바로 대상 의 내부 지침 을 바 꾸 는 것 이다. 즉, 대상 의 this 가 가리 키 는 내용 을 바 꾸 는 것 이다.이것 은 대상 을 대상 으로 하 는 js 프로 그래 밍 과정 에서 때때로 매우 유용 하 다.다음은 apply 를 예 로 들 어 이 두 함수 가 js 에서 의 중요 한 역할 을 말 해 보 겠 습 니 다.예:
 function Person(name,age){   //     
		this.name=name;     //  
		this.age=age;       //  
		this.sayhello=function(){alert(this.name)};
    }
    function Print(){            //      
		this.funcName="Print";
		this.show=function(){
			var msg=[];
			for(var key in this){
				if(typeof(this[key])!="function"){
					msg.push([key,":",this[key]].join(""));
				}
			}
			alert(msg.join(" "));
		};
    }
    function Student(name,age,grade,school){    //   
		Person.apply(this,arguments);// call     
		Print.apply(this,arguments);
		this.grade=grade;                //  
		this.school=school;                 //  
    }
    var p1=new Person("   ",80);
    p1.sayhello();
    var s1=new Student("   ",40,9,"    ");
    s1.show();
    s1.sayhello();
    alert(s1.funcName);

   또한 Function. apply () 는 프로그램의 성능 을 향상 시 키 는 데 두 드 러 진 역할 을 한다.    우 리 는 먼저 Math. max () 함수 부터 말 하면 Math. max 뒤에 임의의 인 자 를 연결 할 수 있 고 마지막 으로 모든 매개 변수의 최대 치 를 되 돌려 줍 니 다.    예 를 들 면
alert(Math.max(5,8));   //8
    alert(Math.max(5,7,9,3,1,6));   //9

    //        ，              。

    var arr=[5,7,9,1];
    //alert(Math.max(arr));    //        。NaN

    //    
    function getMax(arr){
		var arrLen=arr.length;
		for(var i=0,ret=arr[0];i<arrLen;i++){
			ret=Math.max(ret,arr[i]);
		}
		return ret;
    }
	
	alert(getMax(arr)); //9

    //  apply，     
    function getMax2(arr){
		return Math.max.apply(null,arr);
    }
	
	alert(getMax2(arr)); //9

	//            ，  getMax2   ，  ，    。

	//      push  。
	var arr1=[1,3,4];
	var arr2=[3,4,5];
	//       arr2  ，         arr1  ，   arr1=[1,3,4,3,4,5]
	//arr1.push(arr2)      。         [1,3,4,[3,4,5]]

	//               push(      arr1.concat(arr2)，  concat      arr1  )

    var arrLen=arr2.length;
    for(var i=0;i<arrLen;i++){
		arr1.push(arr2[i]);
    }

    //    Apply,         

    Array.prototype.push.apply(arr1,arr2); //  arr1

참조:http://www.thisuc.com/js_apply_call.html
[프로그래밍 연습] 정수의 질량수 공약수 C 언어
javascript 대상 접근 대상 속성 에 대한 두 가지 방식 분석

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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