巢湖网站设计软件公司宣传册设计样本

巢湖网站设计,软件公司宣传册设计样本,个人简历电子版免费,创意网店名一、先理清核心定义#xff1a;谁拥有 prototype 和 __proto__#xff1f;特性prototypeproto#xff08;隐式原型#xff09;归属只有函数拥有#xff08;所有函数默认自带#xff09;只有对象拥有#xff08;所有对象#xff0c;包括函数#xff09;本质普通对象谁拥有prototype和__proto__特性prototypeproto隐式原型归属只有函数拥有所有函数默认自带只有对象拥有所有对象包括函数本质普通对象Function.prototype 除外普通对象作用存储构造函数的「公共属性 / 方法」供实例共享指向当前对象的「原型对象」构建原型链是否可直接修改可手动修改常用非标准属性ES6 后推荐用 Object.getPrototypeOf不建议直接修改关键结论当函数作为构造函数使用时prototype才有用普通函数的prototype无意义。所有对象包括函数对象、实例对象的__proto__最终都会指向某个构造函数的prototype。二、prototype详解构造函数的「公共仓库」1. 基础用法给构造函数挂载公共方法 / 属性// 1. 构造函数函数拥有prototype function Person(name) { this.name name; // 实例自身属性每个实例独立 } // 2. 给Person的prototype挂载公共方法所有实例共享 Person.prototype.sayHi function() { console.log(我是${this.name}); }; Person.prototype.age 18; // 公共属性 // 3. 创建实例 const p1 new Person(张三); const p2 new Person(李四); // 验证所有实例共享prototype中的内容 console.log(p1.age); // 18从Person.prototype获取 console.log(p2.age); // 18 console.log(p1.sayHi p2.sayHi); // true内存复用只有一份方法 // 验证prototype的归属只有函数有 console.log(Person.hasOwnProperty(prototype)); // true函数有prototype console.log(p1.hasOwnProperty(prototype)); // false实例对象无prototype2.prototype的隐藏属性constructor每个函数的prototype都自带一个constructor属性指向原构造函数可理解为「原型的反向指针」。// 接上面的代码 console.log(Person.prototype.constructor Person); // true // 实例可通过__proto__访问constructor确认自己的构造函数 console.log(p1.__proto__.constructor Person); // true console.log(p1.constructor Person); // true自动沿原型链查找 // 注意如果手动覆盖prototype会丢失constructor需手动恢复 Person.prototype { // 手动覆盖后constructor指向Object而非Person sayHello: function() { console.log(覆盖原型); } }; const p3 new Person(王五); console.log(p3.constructor Person); // false console.log(p3.constructor Object); // true // 修复constructor Person.prototype.constructor Person; console.log(p3.constructor Person); // true三、__proto__详解对象的「原型指针」1. 基础逻辑实例的__proto__指向构造函数的prototype当用new 构造函数()创建实例时JS 会自动给实例添加__proto__属性指向构造函数的prototypefunction Cat(name) { this.name name; } Cat.prototype.color orange; const cat1 new Cat(橘猫); // 核心关联实例.__proto__ 构造函数.prototype console.log(cat1.__proto__ Cat.prototype); // true // 实例访问color时自身没有 → 沿__proto__找Cat.prototype → 找到color console.log(cat1.color); // orange2. 所有对象都有__proto__包括函数对象函数本身也是对象所以函数也有__proto__指向Function.prototype所有函数的原型// 函数的__proto__指向Function.prototype console.log(Cat.__proto__ Function.prototype); // true console.log(Function.__proto__ Function.prototype); // true特殊Function自身的__proto__指向自己的prototype // Object是函数它的__proto__也指向Function.prototype console.log(Object.__proto__ Function.prototype); // true // 普通对象的__proto__指向Object.prototype const obj {}; console.log(obj.__proto__ Object.prototype); // true四、原型链prototype和__proto__的联动原型链的本质是对象通过__proto__逐级指向父级构造函数的prototype直到Object.prototype.__proto__ null。可视化原型链以cat1为例cat1实例 ↓ __proto__ Cat.prototype原型对象 ↓ __proto__ Object.prototype顶级原型 ↓ __proto__ null原型链终点代码验证原型链查找规则// 接上面的Cat示例 // 1. 查找cat1.toString()自身没有 → __proto__找Cat.prototype没有→ __proto__找Object.prototype有 console.log(cat1.toString()); // [object Object]来自Object.prototype // 2. 验证原型链终点 console.log(Cat.prototype.__proto__ Object.prototype); // true console.log(Object.prototype.__proto__); // null // 3. 不存在的属性遍历完原型链返回undefined console.log(cat1.abc); // undefinedcat1 → Cat.prototype → Object.prototype → null均无abc五、常见避坑点 最佳实践1. 不要直接修改__proto____proto__是 ES6 之前的非标准属性虽然主流浏览器支持但修改性能差会破坏原型链优化。推荐用标准 APIconst obj {}; // 替代 __proto__ 读取 console.log(Object.getPrototypeOf(obj) Object.prototype); // true // 替代 __proto__ 修改不推荐频繁修改 const protoObj { x: 10 }; Object.setPrototypeOf(obj, protoObj); console.log(obj.x); // 102. 区分「实例属性」和「原型属性」function Dog(name) { this.name name; } Dog.prototype.age 2; const dog1 new Dog(旺财); dog1.age 3; // 给实例自身添加age覆盖原型的age console.log(dog1.age); // 3自身属性优先 // 删除自身属性后恢复读取原型属性 delete dog1.age; console.log(dog1.age); // 2从原型读取3.in与hasOwnProperty的区别原型链影响// 接上面的Dog示例 console.log(age in dog1); // truein检查整个原型链 console.log(dog1.hasOwnProperty(age)); // false自身无age console.log(dog1.hasOwnProperty(name)); // true自身有name六、核心总结prototype函数的「公共仓库」只有构造函数的prototype有实际意义存储实例共享的属性 / 方法自带constructor指向原函数。__proto__对象的「原型指针」所有对象都有指向创建该对象的构造函数的prototype是原型链的核心链路。联动关系实例.__proto__ 构造函数.prototype原型链通过__proto__串联多个prototype直到null。查找规则访问对象属性 / 方法时先查自身 → 沿__proto__查原型 → 直到Object.prototype→ 仍无则返回undefined。