前端---JavaScript基础3

文章目录

前端---JavaScript基础3
- 普通对象与函数对象
- 原型及属性判断
- 构造函数继承
- 原型继承
- 组合继承
- 寄生组合式继承

前端—JavaScript基础3

普通对象与函数对象

原型及属性判断

构造函数继承

原型继承

组合继承

寄生组合式继承

//原型是一个对象，其他对象可以通过它实现属性继承
//prototype是函数对象才有的属性
//什么是普通对象？  函数对象？
//函数
function f() {}
console.log(typeof f,f.prototype)
var ff = new f()
console.log(typeof ff,ff.prototype)//普通对象
var o = {}
console.log(typeof o,o.prototype)//什么是原型？ prototype
//具体原型写法
function Person(){}; //定义一个函数对象
Person.prototype.name = "jack"; //原型中添加属性
Person.prototype.age= 22;
var p1 = new Person(); //实例化
var p2 = new Person();
console.log(p1.name)//总结：
//1.每一个函数对象都有一个prototype属性，但是普通对象没有；prototype下面又有constructor，指向这个函数；
//2.每一个对象都有一个_proto_内部属性，指向它所对应的构造函数的原型对象；

老家比喻原型：（如下图）

//原型有什么用？  可以实现特性：继承
//生成多个实例  缺点：代码量大，不好组织
var cat1 = {}
cat1.name = "大白"
var cat2 = {}
cat2.name = "小白"//工厂创建多个对象  缺点：不能够确定类型
function cat(name){return {name:name}
}
var cat1 = cat("大白")
var cat2 = cat("小白")
console.log(cat1 instanceof cat)  //false//构造函数  缺点：存在方法的重复 代码冗余
function Cat(name){this.name = name;this.say(){console.log(this.name)}
}
var cat1 =new Cat("大白")
var cat2 =new Cat("小白")
console.log(cat1 instanceof Cat)  //true//原型优化  把方法移入到原型中，减少实例的代码
function Cat(name){this.name = name;
}
Cat.prototype.say = function(){console.log(this.name)
}
var cat1 =new Cat("大白")
var cat2 =new Cat("小白")
cat1.say()
console.log(cat1 instanceof Cat)  //true//属性检测 是在对象实例中，还是在原型中
console.log('name' in cat1) //会在原型和实例中找
console.log(cat1.hasOwnProperty('name')) //只会在实例中找//原型应用 继承
function Animal(){this.type = '动物';
}
function Cat(name){this.name= name;
}
Cat.prototype = new Animal();
var cat1 = new Cat("小绿");
console.log(cat1.name,cat1.type) //构造器 继承
function Animal(){this.type = '动物';
}
function Cat(name){//Animal.apply(this); //调用Animal构造器  this==CatAnimal.call(this);  //区别（传递参数）：Animal.call(this,xx,yy);   Animal.apply(this,[xx,yy]); this.name= name;
}
var cat1 = new Cat("大绿");
console.log(cat1.type) //组合继承（原型+构造器） 缺点：调用两次父类构造器
function Person(name){thos.proLans = ["php","java"];this,name = name;
}
Person.prototype.showName = function(){console.log(this.name)
}
function Teacher(name,course){Person.call(this,name);this.course = course;
}
Teacher.prototype = new Person();
var t1 = new Teacher("aaa","语文");
console.log(t1.course,t1.name,t1.proLans)
t1.showName();//原型+构造+寄生
function Person(name){thos.proLans = ["php","java"];this,name = name;
}
Person.prototype.showName = function(){console.log(this.name)
}
function Teacher(name,course){Person.call(this,name);this.course = course;
}
function extends(subObj,superObj){//创建一个空对象，将空对象的原型指向superObj的原型var proObj = Object.create(superObj.prototype); //proObj == 空对象//proObj.constructor = subObj; //手动将constructor指向构造器subObj.prototype = proObj;  // subObj == Teacher
}
extends(Teacher,Person);
var t1 = new Teacher("小侯","数学");
console.log(t1.course,t1.name,t1.proLans)
t1.showName();

create函数：

function create(o){var f = function(){};f.prototype = o;return new f();
}

前端---JavaScript基础3相关推荐

Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
前端---JavaScript基础4
文章目录前端---JavaScript基础3 call&apply 原型链原型链操作例子:按钮组件封装:(类似于Bootstrsp里的按钮组件封装) 前端-JavaScript基础3 c ...
前端---JavaScript基础2
文章目录前端---JavaScript基础2 对象类型判断 call函数对象属性操作深拷贝方法前端-JavaScript基础2 重构以下代码:(以面向对象的方式) 重构后:(其中this指针问 ...
前端---JavaScript基础1
文章目录前端---JavaScript基础1 数据类型面向对象对象创建方式对象类型判断前端-JavaScript基础1 JS是解释型语言:跨平台慢编译型语言:不能跨平台快数据类型 ...
Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
前端JavaScript基础知识点
JavaScript基础阶段说明 JavaScript基础 Web API JavaScript高级 ##第一天重点内容变量的声明及使用数据类型类型转换运算符 JavaScript的组成 E ...
菜鸟学前端--javascript基础
在学习过css相关的知识,有了前端工程师的一些基础知识.但要较好的掌握前端,必须要学习好javascript的知识. 下面将从基本语法.变量.关键字.保留字.语句.函数.BOM等角度阐释. 一.基本语 ...
前端JavaScript基础
目录 JavaScript基础 1:JS概述 1.1:历史: 1.2:现状: 1.3:特点: 1.4:应用场景 2.搭建开发环境 2.1:浏览器: 2.2:服务器端 2.3:运行JS 3.语法规范 4 ...
前端——javascript基础-ECMAScript
文章目录 JavaScript简介 ECMAScript JavaScript的引入方式 javascript得输出方式: 变量五种基本数据类型运算符数据类型转换 if语句 switch语句 w ...

前端---JavaScript基础3

文章目录

前端—JavaScript基础3

普通对象与函数对象

原型及属性判断

构造函数继承

原型继承

组合继承

寄生组合式继承

前端---JavaScript基础3相关推荐

最新文章

热门文章