JavaScript 프로그램에서 상속 기능을 구현하는 방법(그래픽 튜토리얼)

JavaScript는 객체 지향을 주장하는 언어이며, 상속은 객체 지향의 주요 특징입니다. 관심 있는 학생들은 여기에서 확인해 보세요.

개요JavaScript의 모든 객체에는 고유한 상속 체인이 있습니다. 즉, 모든 개체는 "프로토타입" 개체라고 하는 다른 개체를 상속합니다. null을 제외하고는 자체 프로토타입 개체가 없습니다.

프로토타입 객체의 중요성은 A 객체가 B 객체의 프로토타입이라면 B 객체는 A 객체의 모든 속성과 메서드를 얻을 수 있다는 것입니다. Object.getPrototypof 메소드는 현재 객체의 프로토타입 객체를 얻는 데 사용됩니다.

var p = Object.getPrototypeOf(obj);

위 코드에서 객체 p는 객체 obj의 프로토타입 객체입니다.

Object.create 메서드는 새 개체를 생성하고 지정된 개체를 상속하는 데 사용됩니다.

var obj = Object.create(p);

위 코드에서 새로 생성된 obj 객체의 프로토타입은 객체 p입니다.

비표준 __proto__ 속성(앞뒤에 두 개의 밑줄)은 객체의 프로토타입 객체를 재정의할 수 있습니다. 그러나 이 속성은 가능한 한 적게 사용해야 하며 대신 Object.getPrototypeof() 및 Object.setPrototypeOf()를 사용하여 프로토타입 객체를 읽고 써야 합니다.

var obj = {};
var p = {};

obj.__proto__ = p;
Object.getPrototypeOf(obj) === p // true

위 코드는 __proto__ 속성을 통해 p 객체를 obj 객체의 프로토타입으로 설정합니다.

다음은 실제적인 예입니다.

var a = {x: 1};
var b = {__proto__: a};
b.x // 1

위 코드에서 b 객체는 __proto__ 속성을 통해 프로토타입 객체를 a 객체로 설정하므로 b 객체는 a 객체의 모든 속성과 메서드를 얻을 수 있습니다. b 객체 자체에는 x 속성이 없지만 JavaScript 엔진은 __proto__ 속성을 통해 해당 프로토타입 객체 a를 찾은 다음 a의 x 속성을 읽습니다.

new 명령은 생성자를 통해 새 인스턴스 객체를 생성합니다. 핵심은 인스턴스 객체의 프로토타입을 생성자의 프로토타입 속성에 바인딩한 다음 인스턴스 객체에서 생성자를 실행하는 것입니다.

var o = new Foo();

// 等同于
var o = new Object();
o.__proto__ = Foo.prototype;
Foo.call(o);

프로토타입 객체의 자체 __proto__ 속성은 다른 객체를 가리킬 수도 있으므로 레벨별로 "프로토타입 체인"을 형성할 수 있습니다.

var a = { x: 1 };
var b = { __proto__: a };
var c = { __proto__: b };

c.x // 1

한 레벨 위의 프로토타입 체인에서 특정 속성을 검색하면 성능에 영향을 미친다는 점에 유의해야 합니다. 찾고 있는 속성이 상위 수준 프로토타입 개체에 있을수록 성능에 미치는 영향이 더 커집니다. 존재하지 않는 속성을 찾으면 전체 프로토타입 체인이 순회됩니다.

이 액션은 이것을 어디에서 정의하든 사용되면 항상 프로토타입 객체가 아닌 현재 객체를 가리킵니다.

var o = {
 a: 2,
 m: function(b) {
  return this.a + 1;
 }
};

var p = Object.create(o);
p.a = 12;

p.m() // 13

위 코드에서 p 객체의 m 메소드는 프로토타입 객체 o에서 나옵니다. 이때 m 메소드 내부의 this 객체는 o를 가리키는 것이 아니라 p를 가리키고 있습니다.

생성자 상속이 섹션에서는 한 생성자가 다른 생성자를 상속하도록 하는 방법을 소개합니다.

Shape 생성자가 있다고 가정합니다.

function Shape() {
 this.x = 0;
 this.y = 0;
}

Shape.prototype.move = function (x, y) {
 this.x += x;
 this.y += y;
 console.info('Shape moved.');
};
Rectangle构造函数继承Shape。

function Rectangle() {
 Shape.call(this); // 调用父类构造函数
}
// 另一种写法
function Rectangle() {
 this.base = Shape;
 this.base();
}

// 子类继承父类的方法
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

rect instanceof Rectangle // true
rect instanceof Shape // true

rect.move(1, 1) // 'Shape moved.'

위 코드는 생성자의 상속이 두 부분으로 나누어져 있음을 나타냅니다. 한 부분은 하위 클래스가 상위 클래스의 생성자 메서드를 호출하는 것이고, 다른 부분은 하위 클래스의 프로토타입이 해당 클래스의 프로토타입을 가리킨다는 것입니다. 부모 수업.

위 코드에서 하위 클래스는 상위 클래스를 전체적으로 상속받습니다. 때로는 단일 메서드의 상속만 필요한 경우도 있습니다. 이 경우 다음과 같은 작성 방법을 사용할 수 있습니다.

ClassB.prototype.print = function() {
 ClassA.prototype.print.call(this);
 // some code
}

위 코드에서 하위 클래스 B의 인쇄 메서드는 먼저 상위 클래스 A의 인쇄 메서드를 호출한 다음 자체 코드를 배포합니다. 이는 상위 클래스 A의 인쇄 메소드를 상속하는 것과 동일합니다.

__proto__ 속성__proto__ 속성은 현재 객체의 프로토타입 객체, 즉 생성자의 프로토타입 속성을 가리킵니다.

var obj = new Object();

obj.__proto__ === Object.prototype
// true
obj.__proto__ === obj.constructor.prototype
// true

위 코드는 먼저 새 객체 obj를 생성하고 해당 객체의 __proto__ 속성은 생성자(Object 또는 obj.constructor)의 프로토타입 속성을 가리킵니다. 따라서 둘을 비교한 후 true를 반환합니다.

따라서 인스턴스 객체 obj의 프로토타입 객체를 얻는 방법에는 세 가지가 있습니다.

• obj.__proto__

• obj.constructor.prototype

• Object.getPrototypeOf(obj)

위의 세 가지 방법 중 처음 두 가지 방법은 그다지 신뢰할 수 없습니다. 최신 ES6 표준에서는 __proto__ 속성이 브라우저에만 배포되어야 하며 다른 환경에는 배포될 필요가 없다고 규정하고 있습니다. 프로토타입 객체를 수동으로 변경하면 Obj.constructor.prototype이 유효하지 않게 될 수 있습니다.

var P = function () {};
var p = new P();

var C = function () {};
C.prototype = p;
var c = new C();

c.constructor.prototype === p // false

위 코드에서는 C 생성자의 프로토타입 객체가 p로 변경되었고, 그 결과 c.constructor.prototype이 왜곡되었습니다. 따라서 프로토타입 객체를 변경할 때 일반적으로 생성자 속성도 동시에 설정해야 합니다.

C.prototype = p;
C.prototype.constructor = C;

c.constructor.prototype === p // true

따라서 프로토타입 객체를 얻으려면 세 번째 Object.getPrototypeOf 메서드를 사용하는 것이 좋습니다. 방법은 다음과 같이 사용됩니다.

var o = new Object();

Object.getPrototypeOf(o) === Object.prototype
// true

Object.getPrototypeOf 메소드를 사용하여 브라우저가 __proto__ 속성을 지원하는지 확인할 수 있습니다. 이전 브라우저는 이 속성을 지원하지 않습니다.

Object.getPrototypeOf({ __proto__: null }) === null

위 코드는 객체의 __proto__ 속성을 null로 설정한 다음 Object.getPrototypeOf 메서드를 사용하여 객체의 프로토타입을 가져와서 null과 같은지 확인합니다. 현재 환경이 __proto__ 속성을 지원하는 경우 둘 사이의 비교 결과는 true여야 합니다.

__proto__ 속성을 사용하면 인스턴스 객체의 프로토타입을 쉽게 설정할 수 있습니다. machine, vehicle, car라는 세 가지 개체가 있다고 가정합니다. 여기서 machine은 vehicle의 프로토타입이고 vehicle은 car의 프로토타입입니다. 이를 설정하는 데 코드 두 줄만 필요합니다.

vehicle.__proto__ = machine;
car.__proto__ = vehicle;

다음은 __proto__ 속성과 constructor.prototype 속성을 통해 프로토타입 객체에 정의된 속성을 읽는 예입니다.

Array.prototype.p = 'abc';
var a = new Array();

a.__proto__.p // abc
a.constructor.prototype.p // abc

분명히 __proto__는 더 단순해 보입니다.

通过构造函数生成实例对象时，实例对象的__proto__属性自动指向构造函数的prototype对象。

var f = function (){};
var a = {};

f.prototype = a;
var o = new f();

o.__proto__ === a
// true

属性的继承属性分成两种。一种是对象自身的原生属性，另一种是继承自原型的继承属性。

对象的原生属性对象本身的所有属性，可以用Object.getOwnPropertyNames方法获得。

Object.getOwnPropertyNames(Date)
// ["parse", "arguments", "UTC", "caller", "name", "prototype", "now", "length"]

对象本身的属性之中，有的是可以枚举的（enumerable），有的是不可以枚举的。只获取那些可以枚举的属性，使用Object.keys方法。

Object.keys(Date) // []
hasOwnProperty()

hasOwnProperty方法返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上。

Date.hasOwnProperty('length')
// true

Date.hasOwnProperty('toString')
// false

hasOwnProperty方法是JavaScript之中唯一一个处理对象属性时，不会遍历原型链的方法。

对象的继承属性用Object.create方法创造的对象，会继承所有原型对象的属性。

var proto = { p1: 123 };
var o = Object.create(proto);

o.p1 // 123
o.hasOwnProperty("p1") // false

获取所有属性判断一个对象是否具有某个属性（不管是自身的还是继承的），使用in运算符。

"length" in Date // true
"toString" in Date // true

获得对象的所有可枚举属性（不管是自身的还是继承的），可以使用for-in循环。

var o1 = {p1: 123};

var o2 = Object.create(o1,{
 p2: { value: "abc", enumerable: true }
});

for (p in o2) {console.info(p);}
// p2
// p1

为了在for...in循环中获得对象自身的属性，可以采用hasOwnProperty方法判断一下。

for ( var name in object ) {
 if ( object.hasOwnProperty(name) ) {
  /* loop code */
 }
}

获得对象的所有属性（不管是自身的还是继承的，以及是否可枚举），可以使用下面的函数。

function inheritedPropertyNames(obj) {
 var props = {};
 while(obj) {
  Object.getOwnPropertyNames(obj).forEach(function(p) {
   props[p] = true;
  });
  obj = Object.getPrototypeOf(obj);
 }
 return Object.getOwnPropertyNames(props);
}

用法如下：

inheritedPropertyNames(Date)
// ["caller", "constructor", "toString", "UTC", "call", "parse", "prototype", "__defineSetter__", "__lookupSetter__", "length", "arguments", "bind", "__lookupGetter__", "isPrototypeOf", "toLocaleString", "propertyIsEnumerable", "valueOf", "apply", "__defineGetter__", "name", "now", "hasOwnProperty"]

对象的拷贝如果要拷贝一个对象，需要做到下面两件事情。

确保拷贝后的对象，与原对象具有同样的prototype原型对象。
确保拷贝后的对象，与原对象具有同样的属性。
下面就是根据上面两点，编写的对象拷贝的函数。

function copyObject(orig) {
 var copy = Object.create(Object.getPrototypeOf(orig));
 copyOwnPropertiesFrom(copy, orig);
 return copy;
}

function copyOwnPropertiesFrom(target, source) {
 Object
 .getOwnPropertyNames(source)
 .forEach(function(propKey) {
  var desc = Object.getOwnPropertyDescriptor(source, propKey);
  Object.defineProperty(target, propKey, desc);
 });
 return target;
}

多重继承JavaScript不提供多重继承功能，即不允许一个对象同时继承多个对象。但是，可以通过变通方法，实现这个功能。

function M1(prop) {
 this.hello = prop;
}

function M2(prop) {
 this.world = prop;
}

function S(p1, p2) {
 this.base1 = M1;
 this.base1(p1);
 this.base2 = M2;
 this.base2(p2);
}
S.prototype = new M1();

var s = new S(111, 222);
s.hello // 111
s.world // 222

上面代码中，子类S同时继承了父类M1和M2。当然，从继承链来看，S只有一个父类M1，但是由于在S的实例上，同时执行M1和M2的构造函数，所以它同时继承了这两个类的方法。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

详细介绍在JS中Map和ForEach的区别

js装饰设计模式学习心得（详细解答）

详解解读JS数值Number类型（图文教程）

위 내용은 JavaScript 프로그램에서 상속 기능을 구현하는 방법(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!