商城网站怎样做,河北省建设银行网站首页,泾阳县住房和城乡建设局网站,法律咨询网站建设方案文章目录 一、原型1、prototype2、constructor 二、原型链1、字面量原型链2、字面量继承3、构造函数的原型链4、Object.create5、Object.setPrototypeOf 三、继承1、构造函数继承2、原型链继承3、组合继承 四、常见链条1、Function2、Object.prototype 继承是指将特性从父代传递… 文章目录 一、原型1、prototype2、constructor 二、原型链1、字面量原型链2、字面量继承3、构造函数的原型链4、Object.create5、Object.setPrototypeOf 三、继承1、构造函数继承2、原型链继承3、组合继承 四、常见链条1、Function2、Object.prototype 继承是指将特性从父代传递给子代以便新代码可以重用并基于现有代码的特性进行构建。JavaScript 使用对象实现继承。每个对象都有一条链接到另一个称作原型的对象的内部链。该原型对象有自己的原型依此类推直到原型是 null 的对象。 一、原型
1、prototype 构造函数自带原型对象prototype可以在prototype增加属性和方法这样构造函数产生的实例可以共享这些属性和方法如果实例上没有的话实例__proto__属性指向最近的上级prototype如果有继承如果没有继承那么指向构造函数的prototype__proto__在浏览器上显示的是[[Prototype]]注意原型对象prototype也是对象他是被Object创建出来的 const ParentFun function () {this.name 张三;
};
ParentFun.prototype.getName function () {return this.name;
};
const parentObj new ParentFun();
parentObj.__proto__ ParentFun.prototype // true2、constructor constructor其实依赖于prototype只是prototype上的一个属性指向构造函数本身函数对象函数也可以被认为是一个对象可以挂载属性和方法在原型链继承的时候错误操作可能只顾着继承prototype而丢失constructor属性instanceof: a instanceof b会在链条往上查找prototype.constructor看a的原型链上有没有b逐级上查 const ParentFun function () {this.name 张三;
};
ParentFun.prototype.constructor ParentFun // true
// 等同于因为ParentFunObj默认往上查找一层就是ParentFun.prototype
ParentFunObj.constructor ParentFun // trueconst ParentFunObj new ParentFun();
ParentFunObj instanceof ParentFun // true
ParentFunObj instanceof Object // true二、原型链
1、字面量原型链 注意对象中设置字面量{ proto: … }是被允许的、合理的不合理是设置隐式原型obj.proto … const obj {a: 1,// __proto__ 设置了 [[Prototype]]。在这里它被指定为另一个对象字面量。__proto__: {b: 2,__proto__: {c: 3,},},
};
obj.a // 1
obj.b // 2
obj.c // 32、字面量继承
const parent {value: 2,method() {return this.value 1;}
};// child 是一个继承了 parent 的对象
const child {__proto__: parent
};console.log(child.method()); // 3// child --- parent --- Object.prototype --- null3、构造函数的原型链
function Constructor() {}const obj new Constructor();// obj --- Constructor.prototype --- Object.prototype --- null
4、Object.create
const a { a: 1 };
// a --- Object.prototype --- nullconst b Object.create(a);
// b --- a --- Object.prototype --- null
console.log(b.a); // 1继承的5、Object.setPrototypeOf
const obj { a: 1 };
const anotherObj { b: 2 };
Object.setPrototypeOf(obj, anotherObj);
// obj --- anotherObj --- Object.prototype --- null三、继承
1、构造函数继承 call、apply都可以也可以使用class本文案例未举例 const ParentFun function () {this.name 张三;
};
const ChildFun function () {// 继承父类的属性和方法构造函数继承// 注意调用的时机会决定实例的属性顺序比如这里的name属性在age前面ParentFun.call(this);// 运行时this指向childFunc实例对象的内存空间;this.age 20;
};2、原型链继承 Object.setPrototypeOf(ChildFun.prototype, ParentFun.prototype)给目标设置原型链的上一级Object.setPrototypeOf(ChildFun.prototype)获取该目标的原型链的上一级Object.create(ParentFun.prototype)创建和返回新对象设置该对象的原型链上一级原型链扩充每次扩充都会形成上级和下级的二元链链条可以被设置成连续不断一直到顶层null也可以设置成短链 const ParentFun function () {this.name 张三;
};
const ChildFun function () {// 继承父类的属性和方法构造函数继承// 注意调用的时机会决定实例的属性顺序比如这里的name属性在age前面ParentFun.call(this);// 运行时this指向childFunc实例对象的内存空间;this.age 20;
};
ParentFun.prototype.getName function () {return this.name;
};
ChildFun.prototype.getAge function () {return this.age;
};const transferTemp (Parent, Child) {// 空的对象作为临时原型链const Temp () {};Temp.prototype Parent.prototype;Child.prototype new Temp();Child.prototype.constructor Child;
};const transferCreat (Parent, Child) {// Object.create本身就会返回一个空对象该对象的__proto__指向Parent.prototypeChild.prototype Object.create(Parent.prototype);// 覆盖prototype以后会丢失constructor需要重新赋值// constructor在一些判断中可能被用到// prototype在此之前设置的其他属性也会消失比如getAgeChild.prototype.constructor Child;
};// 注意原型链继承方式的区别
// 1
// ChildFun.prototype new ParentFun();
// 2 废弃但可用__proto__ 赋值只会接受对象其他值会被忽略
// ChildFun.prototype.__proto__ ParentFun.prototype;
// 3 推荐 安全有效没有中转对象
// Object.setPrototypeOf(ChildFun.prototype, ParentFun.prototype);
// 4 使用中转对象
// transferTemp(ParentFun, ChildFun);
// 5 使用中转对象
// transferCreat(ParentFun, ChildFun);3、组合继承
const ParentFun function () {this.name 张三;
};
const ChildFun function () {// 继承父类的属性和方法构造函数继承// 注意调用的时机会决定实例的属性顺序比如这里的name属性在age前面ParentFun.call(this);// 运行时this指向childFunc实例对象的内存空间;this.age 20;
};
ParentFun.prototype.getName function () {return this.name;
};
ChildFun.prototype.getAge function () {return this.age;
};// 自定义Object.keys方法 用于获取对象所有属性名
Object.prototype.keysCustom function (obj) {if (typeof obj ! object || obj null) {return;}const result []; // 用于存储结果for (let key in obj) {// hasOwnProperty表示自身的属性不包括原型链上的属性if (obj.hasOwnProperty(key)) {// 相当于循环后存储keyresult.push(key);}}return result;
};Object.setPrototypeOf(ChildFun.prototype, ParentFun.prototype);const childObj new ChildFun();const keysAll [];
const keysOwn [];
for (let key in childObj) {// 自己的属性和原型链上的属性都会遍历出来// 原型链继承的所有属性 Object.prototype 挂载的自定义方法keysAll.push(key);if (childObj.hasOwnProperty(key)) {// 自己的属性才会遍历出来keysOwn.push(key);}
}
// console.log(Object.keysCustom, keysAll, keysOwn, childObj); // TEST
// 结果keysAll [name, age, getName, keysCustom];
// 结果: keysOwn [name, age];// childObj --- ChildFun.prototype --- ParentFun.prototype --- Object.prototype --- null四、常见链条
1、Function Function是所有常见构造函数的源头甚至他自己也被自己创造只要是构造函数都归Function管理包括自定义的函数 // Function创造自己
Object.getPrototypeOf(Function) Function.prototype // true
// 常规构造函数
Object.getPrototypeOf(Object) Function.prototype // true
Object.getPrototypeOf(Array) Function.prototype // true
// 自定义构造函数
const temp () {}
Object.getPrototypeOf(temp) Function.prototype // true2、Object.prototype 只要是对象都归Object管理包括prototype对象当然有例外Object.prototype // 常规构造函数的prototype上一级就是Object.prototype
Object.getPrototypeOf(Function.prototype) Object.prototype // true
Object.getPrototypeOf(Array.prototype) Object.prototype // true
// 链条顶层被null强制了
Object.getPrototypeOf(Object.prototype) Object.prototype // false
Object.getPrototypeOf(Object.prototype) null // true
