JS 프로토타입의 동적 기능을 구현하는 방법-JS 튜토리얼-php.cn

JS 프로토타입의 동적 기능을 구현하는 방법

小云云

풀어 주다： 2018-03-28 17:24:46

원래의

1469명이 탐색했습니다.

JS를 배우면서 함수 및 인스턴스 객체에 의한 프로토타입 수정과 관련된 문제에 직면했습니다. 여러분에게 도움이 되기를 바라며 공유하고 싶습니다.

예제 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原型的动态特性1</title>
</head>
<body>
</body>
<script>
// 创建一个函数
var Person = function() {};

// 给函数的原型添加一个方法
Person.prototype.say = function() {
console.log("下雪的季节...");
};

// 创建第一个实例对象
var p1 = new Person();

// 修改原型中的方法（true）
Person.prototype = {
say: function() {
console.log("一个人的女团...");
}
};

// 创建第二个实例对象
var p2 = new Person();

// 打印p1与p2中的say方法
p1.say(); /* 下雪的季节 */
p2.say(); /* 一个人的女团 */
</script>
</html>

로그인 후 복사

이 경우 프로토타입을 리디렉션하는 데 Person.prototype이 사용됩니다. 함수의 프로토타입은 새 프로토타입만 원하므로 새로 생성된 인스턴스 개체 p2입니다. 출력되는 것은 "1인 걸그룹"

예시 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原型的动态特性2</title>
</head>
<body>
</body>
<script>
// 创建一个函数
var Person = function() {};

// 给函数的原型添加一个方法
Person.prototype.say = function() {
console.log("下雪的季节...");
};

// 创建第一个实例对象
var p1 = new Person();

// 修改p1原型中的方法（false）
p1.prototype = {
say: function() {
console.log("一个人的女团...");
}
};

// 创建第二个实例对象
var p2 = new Person();

// 打印p1与p2中的say方法
p1.say(); /* 下雪的季节 */
p1.prototype.say();/* 一个人的女团，此处调用的是实例对象自己的prototype属性中的方法 */
p2.say(); /* 下雪的季节 */
</script>
</html>

로그인 후 복사

이 경우 p1.prototype은 함수와 자체 프로토타입을 리디렉션할 수 없고 프로토타입 속성만 추가할 뿐입니다. 따라서 p1.say() 및 p1.prototype.say()의 인쇄 결과는 일관성이 없습니다.

예 3:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原型的动态特性2</title>
</head>
<body>
</body>
<script>
// 创建一个函数
var Person = function() {};

// 给函数的原型添加一个方法
Person.prototype.say = function() {
console.log("下雪的季节...");
};

// 创建第一个实例对象
var p1 = new Person();

// 修改p1原型中的方法（true）
p1.__proto__ = {
say: function() {
console.log("一个人的女团...");
}
};

// 创建第二个实例对象
var p2 = new Person();

// 打印p1与p2中的say方法
p1.say(); /* 一个人的女团 */
p1.__proto__.say();/* 一个人的女团 */
p2.say(); /* 下雪的季节 */
</script>
</html>

로그인 후 복사

이 경우 p1.__proto__는 p1의 프로토타입을 리디렉션하는 데 사용됩니다. p1과 p2의 say() 출력이 다릅니다

세 가지 경우에서 저는 다음과 같은 결론에 도달했습니다.

(1) 함수 이름.prototype은 함수의 프로토타입을 리디렉션할 수 있습니다. 이전 프로토타입은 다음과 같습니다. 함수에서 분리됨

(2) 객체 이름.prototype은 함수의 프로토타입을 리디렉션할 수 없습니다. 프로토타입 속성만 인스턴스 객체에 추가됩니다(인스턴스 객체에 프로토타입 속성이 없는 경우)

(3) 객체 Name.__proto__는 객체의 프로토타입을 리디렉션할 수 있지만 함수에 의해 생성된 다른 인스턴스 객체의 프로토타입을 변경할 수는 없습니다.

(4) 프로토타입은 함수 이름으로 호출되며 프로토타입은 리디렉션될 수 있습니다

(5) __proto__ 객체 이름으로 호출되면 객체의 프로토타입을 리디렉션할 수 있지만 함수의 프로토타입과 기타 인스턴스 객체는 영향을 받지 않습니다.

위 내용은 JS 프로토타입의 동적 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!