JS 프로토타입 및 프로토타입 체인에 대한 자세한 설명

이 글에서는 JS 프로토타입과 프로토타입 체인 예제에 대한 자세한 설명을 주로 공유하여 모든 사람이 JS 프로토타입과 프로토타입 체인을 더 명확하게 이해할 수 있도록 돕습니다.

Constructor(함수 이름의 첫 글자는 대문자로 표시됨): 템플릿과 유사

function Foo(name,age){
this.name = name;
this.age = age;
this.class = 'class1';
//return this;默认有这一行
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);创建多个对象

Constructor - 확장: (모든 참조 유형에는 생성자가 있음)

var a = {}는 실제로 var a = new Object() 구문입니다. sugar

var a = []는 실제로 var a = new Array()

function Foo(){...}의 구문적 설탕입니다. 실제로는 var Foo = new Function()

instanceof를 사용하여 함수가 다음과 같은지 확인합니다. 참조 유형의 생성자

*프로토타입 규칙 및 예: (프로토타입 규칙은 프로토타입 체인 학습의 기초입니다)

5 프로토타입 규칙:

-모든 참조 유형(객체, 배열, 함수)에는 객체 특성이 있습니다. 속성을 자유롭게 확장할 수 있습니다('null' 제외)

-모든 참조 유형(객체, 배열, 함수)에는 __proto__(암시적 프로토타입) 속성이 있고 속성 값은 일반 객체입니다

- 모든 함수에는 프로토타입이 있습니다(표시 프로토타입) 속성이며 속성 값도 일반 객체입니다. 모든 참조 유형(객체, 배열, 함수), __proto__ 속성 ​​값은 해당 생성자의 "prototype" 속성 값을 가리킵니다. 즉,

var obj = { }; ==> var obj = new Object();

console.log(obj.__proto__ === Object.prototype)

-객체의 속성을 가져오려고 할 때 객체 자체에 속성이 없는 경우 이 속성은 __proto__(즉, 생성자의 프로토타입)에서 찾습니다.

var item;
for(item in f){
//高级浏览器已经在 for in 中屏蔽了来自原型的属性
//但是在这里建议大家加上这个判断，保证程序的健壮性
if(f.hasOwnProperty(item)){
console.log(item);
}
}

프로토타입 체인:

DOM 쿼리를 캡슐화하는 예 작성:

function Elem(id){
this.elem = document.getElementById(id);
}
Elem.prototype.html = function(val){
var elem = this.elem;
if(val){
elem.innerHTML = val;
return this;//为了后边的链式操作
}else{
return elem.innerHTML;
}
}
Elem.prototype.on  = function(type,fn){
var elem = this.elem;
elem.addEventListener(type,fn);
//如果添加return this,后边还可以接链式操作
}
var p1 = new Elem('p1');
//console.log(p1.html());//打印HTML即DOM结构；
//赋值内容并且绑定事件
p1.html(&#39;<p>hello imooc</p>&#39;);
p1.on(&#39;click&#39;,function(){
alert(&#39;clicked&#39;);
})
//链式操作
p1.html(&#39;<p>hello imooc</p>&#39;).on(&#39;click&#39;,function(){
alert(&#39;clicked&#39;);
}).html(&#39;<p>javascript</p>&#39;);
instanceof：
用来判断是否为该对象的构造函数
对象 instanceof Function/Array/Object;

1. 변수는 다음과 같습니다. 배열 유형?

배열의 변수 인스턴스

2. 프로토타입 체인 상속의 예를 작성하세요

//动物
function Animal(){
this.eat = function(){
console.log('animal eat');
}
}
//狗
function Dog(){
this.bark = function(){
console.log('dog bark');
}
}
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
3.描述new一个对象的过程
function Foo(){
this.name = name;
this.age = age;
this.class = 'class1'
//return this;
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);

- 새 개체 만들기

- 이 새 개체를 가리킵니다.

- 코드를 실행합니다. 즉, 이 개체에 값을 할당합니다.

-Return this

4. zepto(또는 다른 프레임워크) 소스 코드에서 프로토타입 체인을 어떻게 사용하나요?

-소스 코드를 읽는 것은 기술을 향상시키는 효율적인 방법입니다

-하지만 기술을 갖기 위해 "머리를 묻어" 있을 수는 없습니다

-MOOC.com에서 "zepto 디자인 및 소스 코드 분석"을 검색하세요

관련 추천 :

JavaScript 미디엄 프로토타입 프로토타입 체인에 대한 자세한 설명_기본 지식

javascript에서 프로토타입 및 프로토타입 체인 이해_기본 지식

Javascript 객체 지향 알아보기 javascript 프로토타입 및 프로토타입 chain_javascript 기술 이해

위 내용은 JS 프로토타입 및 프로토타입 체인에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!