js基础知识点补充(5)
原型链
原型本身也是个对象,因此原型对象也有原型 对象就有__proto__
由多级父元素逐级继承形成的链式结构
原型链保存着:所有对象的成员(方法和属性) 作用域链保存:所有的变量 原型链作用:控制对象访问成员的使用顺序:优先使用自己的,自己没有,才延原型链向父级查找 作用域链作用:控制变量的使用顺序(优先使用活动对象(AO)中的局部变量,局部中没有,才去延用作用域链向父级作用域查找) 原型链最顶端:Object.prototype 作用域链的终点:window 简单概况: 所有不需要"对象."访问的变量都保存在作用域链中 所有需要用"对象."访问的变量都保存在原型链中
typeof只能识别 原始类型、funtion函数,object引用类型
var n=5,s=‘hello’,b=true,nu=null,un;
var fun = function(){
var obj1={}
var obj2=[];
console.log(
typeof n,//number
typeof s,//string
typeof b,//boolean
typeof nu,//object
typeof un,//undefiend
typeof fun,//function
typeof obj1,//object
typeof obj2,//object
)
}
// 1、验证原型对象
// 如果一个对象的原型对象是Array.prototype
// 1)Object.getPrototypeOf(obj) 获得指定obj的原型对象
// == Array.prototype
/console.log(
Object.getPrototypeOf(obj1) == Array.prototype,
Object.getPrototypeOf(obj2) == Array.prototype
)/
// 2) var bool = father.isPrototypeOf(child); 判断father是否是child的父对象
/console.log(
Array.prototype.isPrototypeOf(obj1),
Array.prototype.isPrototypeOf(obj2)
)/
// 2、验证构造函数
// 1)如果一个对象的构造函数是Array
// obj1.constructor == Array
/console.log(
obj1.constructor == Array,
obj2.constructor == Array,
)/
// 2) var bool = obj instanceof Array 判断obj是否由构造函数Array创建出来 // instance:实例 一个类型中的一个具体的对象 // 实例化 :用new创建一个对象 console.log( obj1 instanceof Array, obj2 instanceof Array, ) var obj3 = {}; obj3.__proto__ = obj2; // 3、检查内部属性class // class是每个对象中记录对象创建时适用的类型的属性 -- DNA // 一旦对象被创建,class属性就无法被修改!!! 无法轻易访问 // 获的class // 唯一的方法:调用Object.protoype中的toString() // 输出结果:[object Object] // 引用类型的对象 class属性值 console.log(obj1.toString()) console.log(obj2.toString()) console.log(obj3.toString()) // 但是几乎所有内置对象的原型对象都重写Object中String方法,所以内置对象的子对象,都无法直接调用Object的toString // 解决:call // 任意对象.任意方法.call(替换的对象) console.log(Object.prototype.toString.call(obj2)); // 最严格的的鉴别数组方法 console.log( Object.prototype.toString.call(obj1) == "[object Array]", Object.prototype.toString.call(obj2) == "[object Array]", Object.prototype.toString.call(obj3) == "[object Array]", ) // 4、Array.isArray(obj) console.log( Array.isArray(obj1), Array.isArray(obj2), Array.isArray(obj3), )
两种类型间的继承
如果发现多个类型之间拥有相同的属性结构和方法
定义父类型
父类型的构造函数,集中定义相同的属性结构
function Flyer(name,speed){
this.name = name;
this.speed = speed;
}
Flyer.prototype.fly = function(){
console.log(
${this.name}以${this.speed}的速度在飞行!);
}
//2.让子类型原型对象继承父类型原型对象
//3.在子类构造函数中借用父类型构造函数 达到请父类型构造函数帮忙初始化属性结构
// 飞机
function Plane(name,speed,score){
// 问题:直接调用父类型构造函数,其中的this默认是window
// 解决:call 只要是this不是想要,就可以用call随便替换 父类型构造函数.call(this,参数…)
//Flyer(name,speed);//this --> window
Flyer.call(this,name,speed);
this.score=score;
}
// 让Plane的型原型对象继承Flyer的原型对象
Object.setPrototypeOf(Plane.prototype,Flyer.prototype);
/Plane.prototype.fly=function(){
console.log(
${this.name}以${this.speed}的速度在飞行!);
}/
Plane.prototype.getScore = function(){
console.log(
击落${this.name}得分是${this.score});
}
// 蜜蜂
function Bee(name,speed,award){
Flyer.call(this,name,speed)
// 击落以后获得 1 Life
this.award = award;
}
// 让Bee的原型对象继承Flyer原型对象
Object.setPrototypeOf(Bee.prototype,Flyer.prototype);
/Bee.prototype.fly = function(){
console.log(
${this.name}以${this.speed}的速度在飞行!);
}/
Bee.prototype.getAward=function(){
console.log(
击落${this.name}获得${this.award}生命);
}
var f16 = new Plane("F16",1000,20); f16.fly(); f16.getScore(); var bee = new Bee("小蜜蜂",50,"1 Life"); bee.fly(); bee.getAward();
- JS基础知识补充和性能优化知识学习(CHROME小技巧)
- js基础知识点补充(6)
- 四,Node.js基础知识(2)
- 网站开发进阶(十五)JS基础知识充电站
- 7个JS基础知识总结
- SQL Server 索引基础知识(8)--- 数据基本格式补充
- 前端JS基础知识
- js基础知识
- 小白入门angular-cli的第一次旅程(学习目标 学习目标 1. 路由基础知识)补充学习
- JavaSE复习之四 基础知识:集合 补充(1)
- js基础知识
- js基础知识总结篇
- vue.js 基础知识看点
- js中的107个基础知识
- js基础知识汇总
- JS基础知识2.0(二)原型
- Python零基础入门二十四之正则表达式知识补充
- 前端js基础理论知识(三循环语句,break和continue的区别,函数,参数)
- Js_基础知识学习_02
- (Ryan的Koa系列博客)1.说说Koa用到的JS基础知识