1.prototype特点

1.1存储在prototype中的方法可以被对应构造函数创建出来的所有对象共享
1.2prototype中除了可以存储方法以外, 还可以存储属性
1.3prototype如果出现了和构造函数中同名的属性或者方法, 对象在访问的时候, 访问到的是构造函数中的数据

     function Person(myName, myAge) {this.name = myName;this.age = myAge;this.currentType = "构造函数中的type";this.say = function () {console.log("构造函数中的say");}}Person.prototype = {currentType: "人",say: function () {console.log("hello world");}}let obj1 = new Person("sss", 34);obj1.say(); // 构造函数中的sayconsole.log(obj1.currentType); // 构造函数中的typelet obj2 = new Person("zs", 44);obj2.say(); // 构造函数中的sayconsole.log(obj2.currentType); // 构造函数中的type

2.prototype应用场景

prototype中一般情况下用于存储所有对象都相同的一些属性以及方法
如果是对象特有的属性或者方法, 我们会存储到构造函数中

3.优化使用prototype后更改的构造函数

prototype、proto、原型链

当不使用prototype

function Person(myName, myAge) {this.name = myName;this.age = myAge;this.currentType = "构造函数中的type";this.say = function () {console.log("构造函数中的say");}}
let obj1 = new Person("lnj", 34);
// obj1.say();
console.log(obj1.currentType);
console.log(Person.prototype.constructor); // Person

使用prototype

     function Person(myName, myAge) {this.name = myName;this.age = myAge;}Person.prototype = {currentType: "人",say: function () {console.log("hello world");}}let obj1 = new Person("lnj", 34);// obj1.say();console.log(obj1.currentType);console.log(Person.prototype.constructor); // Object

问题：使用prototype直接赋值属性或方法会改变原有的关系

解决方法：

注意点: 为了不破坏原有的关系, 在给prototype赋值的时候, 需要在自定义的对象中手动的添加constructor属性, 手动的指定需要指向谁

 function Person(myName, myAge) {this.name = myName;this.age = myAge;}Person.prototype = {// 注意点: 为了不破坏原有的关系, 在给prototype赋值的时候, 需要在自定义的对象中手动的添加constructor属性, 手动的指定需要指向谁constructor: Person,currentType: "人",say: function () {console.log("hello world");}}let obj1 = new Person("lnj", 34);// obj1.say();console.log(obj1.currentType);console.log(Person.prototype.constructor);

4.属性注意点

在给一个对象不存在的属性设置值的时候, 不会去原型对象中查找, 如果当前对象没有就会给当前对象新增一个不存在的属性

     function Person(myName, myAge) {this.name = myName;this.age = myAge;}Person.prototype = {constructor: Person,currentType: "人",say: function () {console.log("hello world");}}let obj = new Person("lnj", 34);// console.log(obj.currentType); // "人"// console.log(obj.__proto__.currentType); // "人"// 注意点: 在给一个对象不存在的属性设置值的时候, 不会去原型对象中查找, 如果当前对象没有就会给当前对象新增一个不存在的属性obj.currentType = "新设置的值";console.log(obj.currentType); // 新设置的值console.log(obj.__proto__.currentType); // "人"

prototype的相关注意点相关推荐

Function.prototype.bind相关知识点
1 var addNum = { // 创建一个方法,给val的值加num 2 num: 5, 3 fun: function(val) { 4 return this.num + val; 5 } ...
细心看完这篇文章，刷新对Javascript Prototype的理解
var person={name:'ninja'}; person.prototype.sayName=function(){return this.name; } 分析上面这段代码,看看有没有问题? ...
JavaScript中的工厂函数vs构造函数vs class
原文链接:JavaScript Factory Functions vs Constructor Functions vs Classes 作者:Eric Elliott 译者:sunny 转载需提前 ...
面试官问发布订阅模式是在问什么？
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行了三个多月,大家一起交流学习,共同进步. 本文来自 @simonezhou 小姐姐投稿的第八期笔记.面 ...
2022年了，你还没搞清楚箭头函数与普通函数的区别嘛？
目录 1.箭头函数简介 2.箭头函数与普通函数的区别 A.声明方式不同,匿名函数 B.this指向不同 C.箭头函数的this永远不会变,call.apply.bind也无法改变 D.箭头函数没有原型 ...
第二章装配Bean(Spring in action,3th)
第二章装配Bean 创建应用对象之间协作关系的行为通常被称为装配(wiring),是依赖注入的本质. XML方式声明Bean ...
javascript中对象在OOP方面的一些知识（主要是prototype和__proto__相关）
1.构造函数(大写函数名 this 无return) 2.原型对象(函数.prototype) 3.实例对象( new出来的东西obj ) 备注:本文举例子都以Fn作为构造函数 Fn.pro ...
JavaScript 中 Object ，Prototype 相关的属性和方法
1.Objuect 类型 Object 类型是所有对象的基类型,可以用 new 运算符产生一个 Object 类型. 开发者可以通过产生 Object 类型的实例并向其动态添加属性和方法来产生自己需要 ...
[js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...

prototype的相关注意点

1.prototype特点

2.prototype应用场景

3.优化使用prototype后更改的构造函数

4.属性注意点

prototype的相关注意点相关推荐

最新文章

热门文章