javascript基于对象的相关知识和javascript的基本数据类型,js创建面向对象的四种方法,原型prototype链,原型方式实现继承

本文介绍了JavaScript中的面向对象编程概念,包括对象创建方法、构造函数、原型链、继承方式等,并详细阐述了组合继承的实现原理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

面向对象OO:对程序员而言,最大的优点是–实现代码的重用
javascript四种创建对象的方式:
前两种是代码无法复用的创建对象的方式;
后两种是代码可以复用的创建对象的方式。
javascript的基本数据类型
number(数值类型)
string(字符串类型)
boolean(布尔类型)
null(空类型)
undefined(未定义类型)
object

js面向对象的实现方式——基于原型prototype的基础上实现
1.对象的概念:
对象是包含相关属性和方法的集合体
属性
方法
2.什么是面向对象
面向对象仅仅是一个概念或者编程思想,
javascript是通过一种叫做原型的方式来实现面向对象编程。
方法一基于Object方式创建对象——代码无法复用
var 对象名称=new Object();
通过属性为该对象添加属性和方法。
这里写图片描述

方法二使用字面量赋值方式创建对象——代码无法复用

这里写图片描述
Js的内置对象
这里写图片描述
多一个正则表达来表单验证(RegExp)
方法三构造函数方式创建对象——可以实现代码重用
这里写图片描述
这里写图片描述
这里写图片描述
调用构造函数的4个步骤
1.创建一个新对象
2.将构造函数的作用域赋给新对象(this就是指向了这个新对象)
3.执行构造函数中的代码
4.返回新对象
这里写图片描述
优化方案:不使用匿名函数,而是将某个已存在的函数赋给构造函数的方法名。
这里写图片描述
方法四原型方式创建对象——可以实现代码重用
构造函数方式创建对象,虽然可以实现代码重用;
但是,当我们要额外添加属性或方法时,只能去改源代码。

原型方式,可以实现代码重用,但是额外添加属性或方法,可以不要修改源代码。
1.每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象
2.prototype就是通过调用构造函数而创建的那个对象实例的原型对象
这里写图片描述
原型的UML图
这里写图片描述
这里写图片描述
这里写图片描述

原型prototype链
这里写图片描述
原型方式实现继承:子类的prototype=new 父类()

//父类
function Humans(){
this.foot=2;
}
Humans.prototype.getFoot=function(){
return this.foot;
}
//子类
function Man(){
this.head=1;
}
Man.prototype=new Humans();//继承了Humans
Man.prototype.getHead=function(){
return this.head;
}
var man1=new Man();
alert(man1.getFoot());//2
alert(man1 Instanceof Object);//true
alert(man1 instanceof Humans)//true
alert(man1 instanceof Man);//true

这里写图片描述

那么javascript如何调用自定义的函数?
调用man1.getFoot()经历的三个步骤
1.搜索实例
2.搜索Man.prototype
3.搜索Humans.prototype;
完整的UML图
那么这么理解下面的图呢?
就是每个对象都有一个prototype用来指向 prototype对象,每个prototype对象都有一个-proto-用来指向父类的prototype对象,而如果没有父亲就默认有一个object超类,每个prototype对象还有一个constructor构造属性用来指向Humans的对象。
这里写图片描述
原型方式实现的继承存在问题(数据相当于是共享的)——解决方案是在子类构造函数中调用父类的构造函数,简称,借用构造函数
与Java对比,相当于,js的子类构造函数,不会隐式调用父类构造函数,必须手工调用父类构造函数,简称借用构造函数。
这里写图片描述
如何调用父类有参构造函数?

 fuction Humans(name){
 this.name = name;
 }
 function Man(){
 Humans.call(this,"mary");//继承了Humans,同事还传递了参数
this.age = 38;//实例属性
}
var man1 = new Man();
alert(man1.name);//输出Mary
alert(man1.age);//输出38;

javascript真正的继承——组合继承

原型链方式:子类.prototype=new 父类();
借用父类构造函数:
在子类构造函数中调用如下代码
父类。call(this,参数);

组合继承:有时也叫做伪经典继承
1.将原型链和借用构造函数的技术结合到一块,发挥二者之长的一种继承模式
2.使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。

Humans.call(this,name);//继承属性
Man.prototype= new Humans();//继承方法

这里写图片描述
小结
这里写图片描述

js的基于对象的内容
四种创建对象的方式
前两种,代码不可重用——基于Object和使用字面量直接赋值
后两种,代码可以重用——基于构造函数和基于原型

基于构造函数和基于原型的异同:
相同点:都可以实现代码重用;
不同点:在于扩展新属性和新方法时,是否要修改源代码。
构造函数方式,扩展新属性和新方法,要修改源代码;
基于原型方式,扩展新属性和新方法,不要修改源代码。

JS组合继承=原型链方式(继承方法) + 借用父类构造函数(继承属性)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值