asp网站做视频,wordpress插件整合到主题,广告营销包括哪些方面,电子商务网站建设的安全性在讲原型之前我们先来了解一下函数。 在JS中#xff0c;函数的本质就是对象#xff0c;它与其他对象不同的是#xff0c;创建它的构造函数与创建其他对象的构造函数不一样。那产生函数对象的构造函数是什么呢#xff1f;是一个叫做Function的特殊函数#xff0c;通过newFu…在讲原型之前我们先来了解一下函数。 在JS中函数的本质就是对象它与其他对象不同的是创建它的构造函数与创建其他对象的构造函数不一样。那产生函数对象的构造函数是什么呢是一个叫做Function的特殊函数通过newFunction 产生的对象就是一个函数。 function f1() {}
//上面的函数等同于
var f1 new Function();function sum(a, b) {return a b;
}
//上面的函数等同于
var sum new Function(a, b, return a b);//前面的是函数形参名最后一个参数是函数体当一个函数被创建后这个函数就会自动附带一个属性prototype它就是一个Object对象代表着函数的原型。也就是说prototype就是原型对象。 原型对象中包含两个属性constructor和__proto__。constructor这个属性是指创建原型的函数,它指向函数本身。所以有以下关系
var Person function () { };
var p new Person(); 看这个 new 究竟做了什么 我们把 new 的过程拆分成以下三步 var p{}; 也就是说初始化一个对象p。 p.protoPerson.prototype; Person.call§;也就是说构造p也可以称之为初始化p。 总结原型链的工作原理
1. 原型对象在JavaScript中对象可以有一个原型对象该对象本身也是一个对象。对象的原型对象通过内部属性[[Prototype]]来引用这个属性在ES5可以通过Object.getPrototypeOf()或__proto__非标准但被广泛实现的属性访问。
2. 属性查找当访问一个对象的属性时如果该属性在对象自身上不存在JavaScript 引擎会沿着[[Prototype]]链向上查找直到找到该属性或到达链的末端。
3. 构造函数的prototype属性每个函数都有一个prototype属性指向一个对象这个对象是使用该构造函数创建的所有实例的原型。
4. 原型链的末端所有原型链最终都指向Object.prototype这是内置的Object构造函数的prototype属性。Object.prototype的原型是null表示原型链的结束。
代码示例
示例1原型链的基础
function Person(name) {this.name name;
}// 为Person构造函数的prototype添加一个方法
Person.prototype.sayHello function() {console.log(Hello, my name is this.name);
};// 创建Person的实例
var person new Person(Alice);// 调用原型链上的方法
person.sayHello(); // 输出: Hello, my name is Alice// 查看person的原型
console.log(Object.getPrototypeOf(person) Person.prototype); // 输出: true示例2原型链的继承
// 假设我们有一个Animal构造函数
function Animal(species) {this.species species;
}Animal.prototype.eat function() {console.log(Animal eats.);
};// Person构造函数继承自Animal
Person.prototype Object.create(Animal.prototype);
Person.prototype.constructor Person; // 修复Person实例的constructor属性// 创建Person的实例
var person new Person(Alice);// 继承自Animal的方法
person.eat(); // 输出: Animal eats.// Person的原型链
console.log(person.__proto__ Person.prototype); // 输出: true
console.log(person.__proto__.__proto__ Animal.prototype); // 输出: true
console.log(person.__proto__.__proto__.__proto__ Object.prototype); // 输出: true示例3原型链的查找过程
var myObject {sayHi: function() {console.log(Hi!);}
};var childObject Object.create(myObject);
childObject.name Child;// 调用原型链上的方法
childObject.sayHi(); // 输出: Hi!// 原型链的属性查找
console.log(childObject.hasOwnProperty(sayHi)); // 输出: false
console.log(childObject.hasOwnProperty(name)); // 输出: true最后有关原型链的注意问题
原型链的修改可以在任何时候修改对象的原型但要注意这可能会影响所有继承自该原型的对象。性能问题原型链的深度不宜过长否则可能会影响属性访问的性能。构造函数的选择使用构造函数、Object.create()或其他工厂模式时要明确原型链的设置。__proto__属性__proto__属性是特定于某些JavaScript引擎的实现并非ECMAScript标准的一部分。使用Object.getPrototypeOf()和Object.setPrototypeOf()是更标准和可移植的方法。
原型链你理解了吗
