首页 >> js开发 >> jsJS原形与原型链深入详解js大全
jsJS原形与原型链深入详解js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了JS原形与原型链。分享给大家供大家参考，具体如下：前言在JS中，我们经常会遇到原型。字面上的意思会让我们认为，是某个对象的原型，可用来继承。但是其实这样的理解是片面的，下面通过本文来了解原型与原型链的细节，再顺便谈谈继承的几种方式。原型与原型链原型在讲到原型之前，我们先来回顾一下JS中的对象。在JS中，万物皆对象，就像字符串、数值、布尔、数组等。ECMA-262把对象定义为：无序属性的集合，其属性可包含基本值、对象或函数。对象是拥有属性和方法的数据，为了描述这些事物，便有了原型的概念。字符串、数值、布尔、数组ECMA-262无序属性的集合，其属性可包含基本值、对象或函数原型无论何时，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向该函数的原型对象。所有原型对象都会获得一个constructor属性，这个属性包含一个指向prototype属性所在函数的指针。prototypeconstructorprototype这段话摘自《JS高级程序设计》，很好理解，以创建实例的代码为例。JS高级程序设计
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
alert(this.name);
};
}
const person1 = new Person("gali", 18);
const person2 = new Person("pig", 20);
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
alert(this.name);
};
}
const person1 = new Person("gali", 18);
const person2 = new Person("pig", 20);上面例子中的person1跟person2都是构造函数Person()的实例，Person.prototype指向了Person函数的原型对象，而Person.prototype.constructor又指向Person。Person的每一个实例，都含有一个内部属性__proto__，指向Person.prototype，就像上图所示，因此就有下面的关系。Person()Person.prototypePerson.prototype.constructor__proto__
console.log(Person.prototype.constructor === Person); // true
console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true
console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true继承JS是基于原型的语言，跟基于类的面向对象语言有所不同，JS中并没有类这个概念，有的是原型对象这个概念，原型对象作为一个模板，新对象可从原型对象中获得属性。那么JS具体是怎样继承的呢？在讲到继承这个话题之前，我们先来理解原型链这个概念。原型链构造函数，原型和实例的关系已经很清楚了。每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例对象都包含一个指向与原型对象的指针。这样的关系非常好理解，但是如果我们想让原型对象等于另一个类型的实例对象呢？那么就会衍生出相同的关系，此时的原型对象就会含有一个指向另一个原型对象的指针，而另一个原型对象会含有一个指向另一个构造函数的指针。如果另一个原型对象又是另一个类型的实例对象呢？这样就构成了原型链。文字可能有点难理解，下面用代码举例。每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例对象都包含一个指向与原型对象的指针
function SuperType() {
this.name = "张三";
}
SuperType.prototype.getSuperName = function() {
return this.name;
};
function SubType() {
this.subname = "李四";
}
SubType.prototype = new SuperType();
SubType.prototype.getSubName = function() {
return this.subname;
};
const instance = new SubType();
console.log(instance.getSuperName()); // 张三
function SuperType() {
this.name = "张三";
}
SuperType.prototype.getSuperName = function() {
return this.name;
};
function SubType() {
this.subname = "李四";
}
SubType.prototype = new SuperType();
SubType.prototype.getSubName = function() {
return this.subname;
};
const instance = new SubType();
console.log(instance.getSuperName()); // 张三上述例子中，SubType的原型对象作为SuperType构造函数的实例对象，此时，SubType的原型对象就会有一个__proto__属性指向SuperType的原型对象，instance作为SubType的实例对象，必然能共享SubType的原型对象的属性，又因为SubType的原型对象又指向SuperType原型对象的属性，因此可得，instance继承了SuperType原型的所有属性。SuperType构造函数SubType的原型对象__proto__SuperType的原型对象SubType的原型对象SuperType原型对象我们都知道，所有函数的默认原型都是Object的实例，所以也能得出，SuperType的默认原型必然有一个__proto__指向Object.prototype。__proto__图中由__proto__属性组成的链子，就是原型链，原型链的终点就是null。__proto__null上图可很清晰的看出原型链的结构，这不禁让我想到JS的一个运算符instanceof，instanceof可用来判断一个实例对象是否属于一个构造函数。instanceof
A instanceof B; // true
A instanceof B; // true实现原理其实就是在A的原型链上寻找是否有原型等于B.prototype,如果一直找到A原型链的顶端null，仍然找不到原型等于B.prototype，那么就可返回false。下面手写一个instanceof，这个也是很多大厂常用的手写面试题。AB.prototypeB.prototypeinstanceof
function Instance(left, right) {
left = left.__proto__;
right = right.prototype;
while (true) {
if (left === null) return false;
if (left === right) return true;
// 继续在left的原型链向上找
left = left.__propo__;
}
}
function Instance(left, right) {
left = left.__proto__;
right = right.prototype;
while (true) {
if (left === null) return false;
if (left === right) return true;
// 继续在left的原型链向上找
left = left.__propo__;
}
}原型链继承上面例子中，instance继承了SuperType原型的属性，其继承的原理其实就是通过原型链实现的。原型链很强大，可用来实现继承。可是单纯的原型链继承也是有问题存在的。
实例属性变成原型属性，影响其他实例
创建子类型的实例时，不能向超类型的构造函数传递参数
实例属性变成原型属性，影响其他实例创建子类型的实例时，不能向超类型的构造函数传递参数
function SuperType() {
this.colorArr = ["red", "blue", "green"];
}
function SubType() {}
SubType.prototype = new SuperType();
const instance1 = new SubType();
instance1.colorArr.push("black");
console.log(instance1.colorArr); // ["red", "blue", "green", "black"]
const instance2 = new SubType();
console.log(instance2.colorArr); // ["red", "blue", "green", "black"]
function SuperType() {
this.colorArr = ["red", "blue", "green"];
}
function SubType() {}
SubType.prototype = new SuperType();
const instance1 = new SubType();
instance1.colorArr.push("black");
console.log(instance1.colorArr); // ["red", "blue", "green", "black"]
const instance2 = new SubType();
console.log(instance2.colorArr); // ["red", "blue", "green", "black"]当SubType的原型作为SuperType的实例时，此时SubType的实例对象通过原型链继承到colorArr属性，当修改了其中一个实例对象从原型链中继承到的原型属性时，便会影响到其他实例。对instance1.colorArr的修改，在instance2.colorArr便能体现出来。组合继承组合继承指的是组合原型链和构造函数的技术，通过原型链实现对原型属性和方法的继承，而通过借用构造函数实现对实例属性的继承。组合原型链和构造函数的技术
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
};
function SubType(name, age) {
// 继承属性，借用构造函数实现对实例属性的继承
SuperType.call(this, name);
this.age = age;
}
// 继承原型属性及方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
console.log(this.age);
};
const instance1 = new SubType("gali", 18);
instance1.colors.push("black");
console.log(instance1.colors); // ["red", "blue", "green", "black"]
instance1.sayName(); // gali
instance1.sayAge(); // 18
const instance2 = new SubType("pig", 20);
console.log(instance2.colors); // ["red", "blue", "green"]
instance2.sayName(); // pig
instance2.sayAge(); // 20
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
};
function SubType(name, age) {
// 继承属性，借用构造函数实现对实例属性的继承
SuperType.call(this, name);
this.age = age;
}
// 继承原型属性及方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
console.log(this.age);
};
const instance1 = new SubType("gali", 18);
instance1.colors.push("black");
console.log(instance1.colors); // ["red", "blue", "green", "black"]
instance1.sayName(); // gali
instance1.sayAge(); // 18
const instance2 = new SubType("pig", 20);
console.log(instance2.colors); // ["red", "blue", "green"]
instance2.sayName(); // pig
instance2.sayAge(); // 20上述例子中，借用构造函数继承实例属性，通过原型继承原型属性与方法。这样就可让不同的实例分别拥有自己的属性，又可共享相同的方法。而不会像原型继承那样，对实例属性的修改影响到了其他实例。组合继承是JS最常用的继承方式。组合继承寄生组合式继承虽然说组合继承是最常用的继承方式，但是有没有发现，就上面的例子中，组合继承中调用了2次SuperType函数。回忆一下，在第一次调用SubType时。
SubType.prototype = new SuperType();
SubType.prototype = new SuperType();这里调用完之后，SubType.prototype会从SuperType继承到2个属性：name和colors。这2个属性存在SubType的原型中。而在第二次调用时,就是在创造实例对象时，调用了SubType构造函数，也就会再调用一次SuperType构造函数。
SuperType.call(this, name);
SuperType.call(this, name);第二次调用之后，便会在新的实例对象上创建了实例属性：name和colors。也就是说，这个时候，实例对象跟原型对象拥有2个同名属性。这样实在是浪费，效率又低。实例对象跟原型对象拥有2个同名属性为了解决这个问题，引入了寄生组合继承方式。重点就在于，不需要为了定义SubType的原型而去调用SuperType构造函数，此时只需要SuperType原型的一个副本，并将其赋值给SubType的原型即可。
function InheritPrototype(subType, superType) {
// 创建超类型原型的一个副本
const prototype = Object(superType.prototype);
// 添加constructor属性，因为重写原型会失去constructor属性
prototype.constructor = subType;
subType.prototype = prototype;
}
function InheritPrototype(subType, superType) {
// 创建超类型原型的一个副本
const prototype = Object(superType.prototype);
// 添加constructor属性，因为重写原型会失去constructor属性
prototype.constructor = subType;
subType.prototype = prototype;
}将组合继承中的：
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;替换成：
InheritPrototype(SubType, SuperType);
InheritPrototype(SubType, SuperType);寄生组合继承的优点在于，只需要调用一次SuperType构造函数。避免了在SubType的原型上创建多余的不必要的属性。优点只需要调用一次SuperType构造函数总结温故而知新，再次看回《JS高级程序设计》这本书的原型与原型链部分，发现很多以前忽略掉的知识点。而这次回看这个知识点，并输出了一篇文章，对我来说受益匪浅。写文章往往不是为了写出怎样的文章，其实中间学习的过程才是最享受的。JS高级程序设计感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
alert(this.name);
};
}
const person1 = new Person("gali", 18);
const person2 = new Person("pig", 20);
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
alert(this.name);
};
}
const person1 = new Person("gali", 18);
const person2 = new Person("pig", 20);上面例子中的person1跟person2都是构造函数Person()的实例，Person.prototype指向了Person函数的原型对象，而Person.prototype.constructor又指向Person。Person的每一个实例，都含有一个内部属性__proto__，指向Person.prototype，就像上图所示，因此就有下面的关系。Person()Person.prototypePerson.prototype.constructor__proto__
console.log(Person.prototype.constructor === Person); // true
console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true
console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true继承JS是基于原型的语言，跟基于类的面向对象语言有所不同，JS中并没有类这个概念，有的是原型对象这个概念，原型对象作为一个模板，新对象可从原型对象中获得属性。那么JS具体是怎样继承的呢？在讲到继承这个话题之前，我们先来理解原型链这个概念。原型链构造函数，原型和实例的关系已经很清楚了。每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例对象都包含一个指向与原型对象的指针。这样的关系非常好理解，但是如果我们想让原型对象等于另一个类型的实例对象呢？那么就会衍生出相同的关系，此时的原型对象就会含有一个指向另一个原型对象的指针，而另一个原型对象会含有一个指向另一个构造函数的指针。如果另一个原型对象又是另一个类型的实例对象呢？这样就构成了原型链。文字可能有点难理解，下面用代码举例。每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例对象都包含一个指向与原型对象的指针
function SuperType() {
this.name = "张三";
}
SuperType.prototype.getSuperName = function() {
return this.name;
};
function SubType() {
this.subname = "李四";
}
SubType.prototype = new SuperType();
SubType.prototype.getSubName = function() {
return this.subname;
};
const instance = new SubType();
console.log(instance.getSuperName()); // 张三
function SuperType() {
this.name = "张三";
}
SuperType.prototype.getSuperName = function() {
return this.name;
};
function SubType() {
this.subname = "李四";
}
SubType.prototype = new SuperType();
SubType.prototype.getSubName = function() {
return this.subname;
};
const instance = new SubType();
console.log(instance.getSuperName()); // 张三上述例子中，SubType的原型对象作为SuperType构造函数的实例对象，此时，SubType的原型对象就会有一个__proto__属性指向SuperType的原型对象，instance作为SubType的实例对象，必然能共享SubType的原型对象的属性，又因为SubType的原型对象又指向SuperType原型对象的属性，因此可得，instance继承了SuperType原型的所有属性。SuperType构造函数SubType的原型对象__proto__SuperType的原型对象SubType的原型对象SuperType原型对象我们都知道，所有函数的默认原型都是Object的实例，所以也能得出，SuperType的默认原型必然有一个__proto__指向Object.prototype。__proto__图中由__proto__属性组成的链子，就是原型链，原型链的终点就是null。__proto__null上图可很清晰的看出原型链的结构，这不禁让我想到JS的一个运算符instanceof，instanceof可用来判断一个实例对象是否属于一个构造函数。instanceof
A instanceof B; // true
A instanceof B; // true实现原理其实就是在A的原型链上寻找是否有原型等于B.prototype,如果一直找到A原型链的顶端null，仍然找不到原型等于B.prototype，那么就可返回false。下面手写一个instanceof，这个也是很多大厂常用的手写面试题。AB.prototypeB.prototypeinstanceof
function Instance(left, right) {
left = left.__proto__;
right = right.prototype;
while (true) {
if (left === null) return false;
if (left === right) return true;
// 继续在left的原型链向上找
left = left.__propo__;
}
}
function Instance(left, right) {
left = left.__proto__;
right = right.prototype;
while (true) {
if (left === null) return false;
if (left === right) return true;
// 继续在left的原型链向上找
left = left.__propo__;
}
}原型链继承上面例子中，instance继承了SuperType原型的属性，其继承的原理其实就是通过原型链实现的。原型链很强大，可用来实现继承。可是单纯的原型链继承也是有问题存在的。
实例属性变成原型属性，影响其他实例
创建子类型的实例时，不能向超类型的构造函数传递参数
实例属性变成原型属性，影响其他实例创建子类型的实例时，不能向超类型的构造函数传递参数
function SuperType() {
this.colorArr = ["red", "blue", "green"];
}
function SubType() {}
SubType.prototype = new SuperType();
const instance1 = new SubType();
instance1.colorArr.push("black");
console.log(instance1.colorArr); // ["red", "blue", "green", "black"]
const instance2 = new SubType();
console.log(instance2.colorArr); // ["red", "blue", "green", "black"]
function SuperType() {
this.colorArr = ["red", "blue", "green"];
}
function SubType() {}
SubType.prototype = new SuperType();
const instance1 = new SubType();
instance1.colorArr.push("black");
console.log(instance1.colorArr); // ["red", "blue", "green", "black"]
const instance2 = new SubType();
console.log(instance2.colorArr); // ["red", "blue", "green", "black"]当SubType的原型作为SuperType的实例时，此时SubType的实例对象通过原型链继承到colorArr属性，当修改了其中一个实例对象从原型链中继承到的原型属性时，便会影响到其他实例。对instance1.colorArr的修改，在instance2.colorArr便能体现出来。组合继承组合继承指的是组合原型链和构造函数的技术，通过原型链实现对原型属性和方法的继承，而通过借用构造函数实现对实例属性的继承。组合原型链和构造函数的技术
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
};
function SubType(name, age) {
// 继承属性，借用构造函数实现对实例属性的继承
SuperType.call(this, name);
this.age = age;
}
// 继承原型属性及方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
console.log(this.age);
};
const instance1 = new SubType("gali", 18);
instance1.colors.push("black");
console.log(instance1.colors); // ["red", "blue", "green", "black"]
instance1.sayName(); // gali
instance1.sayAge(); // 18
const instance2 = new SubType("pig", 20);
console.log(instance2.colors); // ["red", "blue", "green"]
instance2.sayName(); // pig
instance2.sayAge(); // 20
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
};
function SubType(name, age) {
// 继承属性，借用构造函数实现对实例属性的继承
SuperType.call(this, name);
this.age = age;
}
// 继承原型属性及方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
console.log(this.age);
};
const instance1 = new SubType("gali", 18);
instance1.colors.push("black");
console.log(instance1.colors); // ["red", "blue", "green", "black"]
instance1.sayName(); // gali
instance1.sayAge(); // 18
const instance2 = new SubType("pig", 20);
console.log(instance2.colors); // ["red", "blue", "green"]
instance2.sayName(); // pig
instance2.sayAge(); // 20上述例子中，借用构造函数继承实例属性，通过原型继承原型属性与方法。这样就可让不同的实例分别拥有自己的属性，又可共享相同的方法。而不会像原型继承那样，对实例属性的修改影响到了其他实例。组合继承是JS最常用的继承方式。组合继承寄生组合式继承虽然说组合继承是最常用的继承方式，但是有没有发现，就上面的例子中，组合继承中调用了2次SuperType函数。回忆一下，在第一次调用SubType时。
SubType.prototype = new SuperType();
SubType.prototype = new SuperType();这里调用完之后，SubType.prototype会从SuperType继承到2个属性：name和colors。这2个属性存在SubType的原型中。而在第二次调用时,就是在创造实例对象时，调用了SubType构造函数，也就会再调用一次SuperType构造函数。
SuperType.call(this, name);
SuperType.call(this, name);第二次调用之后，便会在新的实例对象上创建了实例属性：name和colors。也就是说，这个时候，实例对象跟原型对象拥有2个同名属性。这样实在是浪费，效率又低。实例对象跟原型对象拥有2个同名属性为了解决这个问题，引入了寄生组合继承方式。重点就在于，不需要为了定义SubType的原型而去调用SuperType构造函数，此时只需要SuperType原型的一个副本，并将其赋值给SubType的原型即可。
function InheritPrototype(subType, superType) {
// 创建超类型原型的一个副本
const prototype = Object(superType.prototype);
// 添加constructor属性，因为重写原型会失去constructor属性
prototype.constructor = subType;
subType.prototype = prototype;
}
function InheritPrototype(subType, superType) {
// 创建超类型原型的一个副本
const prototype = Object(superType.prototype);
// 添加constructor属性，因为重写原型会失去constructor属性
prototype.constructor = subType;
subType.prototype = prototype;
}将组合继承中的：
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;替换成：
InheritPrototype(SubType, SuperType);
InheritPrototype(SubType, SuperType);寄生组合继承的优点在于，只需要调用一次SuperType构造函数。避免了在SubType的原型上创建多余的不必要的属性。优点只需要调用一次SuperType构造函数总结温故而知新，再次看回《JS高级程序设计》这本书的原型与原型链部分，发现很多以前忽略掉的知识点。而这次回看这个知识点，并输出了一篇文章，对我来说受益匪浅。写文章往往不是为了写出怎样的文章，其实中间学习的过程才是最享受的。JS高级程序设计感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
相关文章:
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全
- jsVue-CLI 3 scp2自动部署项目至服务器的方法js大全
- js使用React-Router实现前端路由鉴权的示例代码js大全
- JavaScriptthree.js欧拉角和四元数的使用方法
- js关于angular浏览器兼容性问题的解决方案js大全
- jsElement Input输入框的使用方法js大全
- jsvue项目使用$router.go(-1)返回时刷新原来的界面操作js大全
- jsvue 页面回退mounted函数不执行的解决方案js大全
- js代码处理JavaScript值为undefined的7个小技巧
- jsAngular利用HTTP POST下载流文件的步骤记录js大全
刚刚发布热门点击发布时间
- [05/19]前端外包开发:git 舍弃本地代码强制从远程库更新
- [05/19]git 提交 忽略husky git 提交 忽略eslint 检测
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
