内置对象 构造函数

目录

内置对象

set对象

math对象

Date对象

array对象:数组对象

字符串对象

值类型和引用类型

面向对象编程

ES6:ESMAScript6的面向对象语法

ES5中创建类

类的静态(类)成员和实例成员

原型对象

原型链

面对对象

类和对象


内置对象

set对象

math对象

// 获取指定范围内的随机数
function getrandom(min,max){
    return Math.floor(Math.random()*((max-min+1)+min))
}
let r=getrandom(1,10)
while(true){
    let num=prompt('猜数字,范围在1到10之间')
    if(num>r){
        alert('猜大了')
    }
    else if(num<r){
        alert('猜小了')
    }
    else{
        alert('恭喜你,猜对了')
        break
    }
}

Date对象

日期对象,需要通过new Date()创建一个实例化对象才能使用

object对象是js所有内置对象的父对象(所有的内置对象都是从object继承而来)

创建date对象:

1。new Date()创建一个代表当前日期的对象,获取的是当前的时间

2.new Date(年,月,日,时,分,秒) 其中月份输出值要加一,月份的值在0-11之间

3.new Date(毫秒数):给定毫秒数创建日期对象 ,1s=1000ms  num=2.333234

4.new Date(日期字符串):通过给定的字符串创建日期对象 str=‘2022-3-12’

Date对象的获取方法:

1.getFullYear():获取日期对象的四位年份

2.getMonth( ):取值在0-11之间

3.getDate:返回日期对象的天数 1-31之间

4.getDay:返回一周中的哪一天 0表示星期天

5.getHours:获取小时数

6.getMinutes:获取分钟数

7.getSeconds获取秒钟数

8.getTime:返回1970年到指定日期之间的

倒计时

windoe。setTimeout(函数,间隔时间(毫秒)):每隔多长时间掉哦用一次函数

function showTime() {
    // 创建当前日期对象
    let cur =new Date()
    // 创建2022-6-3日期对象
    let dt=new Date('2022-6-3')
    // 获取秒数
    let t1=cur.getTime()
    let t2=dt.getTime()
    // 计算毫秒数之差:
    let times=t2-t1
    // 将毫秒数转为时间差:天数
    let d=parseInt(times/1000/60/60/24)
    d=d<10?'0'+d:d
    // 将秒数转化为小时数
    let h=parseInt(times/1000/60/60%24)
    h=h<10?'0'+h:h
    // 将时间差转化为分钟数
    let m=parseInt(times/1000/60%60)
    m=m<10?'0'+m:m
    // 将时间差转化为秒钟数
    let s=parseInt(times/1000%60)
    s=s<10?'0'+s:s
    let str='端午节倒计时'+d+'天'+h+'时'+m+'分'+s+'秒'
    document.getElementById('tt').innerHTML=str
    wimdow.setTimeout(showTime,1000)
    // 每隔一秒钟调用一次函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../5.21/date.js"></script>
</head>
<body onload="showTime()">
    <!-- 当页面载入时调用showtime函数 -->
    <div id="tt"></div>

    
</body>
</html>

三天打鱼两天晒网

function showTime(){
    let cur=new Date()
    let dt=new Date('2008-8-8')
    let t1=cur.getTime()
    let t2=dt.getTime()
    let times=t2-t1
    let d=parseInt(times/1000/60/60/24)
    let num=(d%5)
    if(num=1&&2&&3){
        alert(今天是打渔)
    }
    else{
        alert(今天是晒网)
    }
    
}
showTime()

array对象:数组对象

1.常用属性:长度length

2.常用方法:

数组类型检测方法:

instanceof运算符:变量名 instanceof Array

isArray():Array.isArray(变量名)

给数组添加新元素

push():在数组末尾添加新元素,返回新的数组长度

var a=[]
console.log('数组长度'+a.length)
let k=a.push(12,23)
console.log('数组长度'+k)
consolo.log('数组'+a)

unshift():在数组开头添加新元素,返回新的数组长度,修改原来数组

删除数组元素:

pop():从数组最后一个元素删除 ,返回的是被移除的数组元素

let t=a.pop()
console.log('删除的元素是'+t)

shift():从第一个元素开始删除

let p=a.shift()
cnsole.log('删除的元素是'+p)

数组排序:

sort():默认转换为字符串,升序从小到大排列

reverse():反转数组

数组查找

indexOf():返回在数组中可以找到一个给定元素的第一个索引,如果不存在,返回-1

lastindexOf():返回在数组中可以找到一个给定元素的最后一个索引,如果不存在,返回-1

let k=arr.indexOf(45)
let k=arr.lastindexOf(55)
console.log(k)
//数组去重
function unique(arr){
  let newArr=[]
  for(let i=0;i<arr.length;i++) {
    if(newArr.indexOf(arr[i])===-1){
  //arr数组中索引值为i的元素在newArr中没有
      newArr.push(arr[i])
    }
  }
return newArr
}
var arr=[45,32,45,15,45,56]
console.log('数组'+arr)
var demo=unique(arr)
console.log('去重后的数组'+demo)

将数组转换为字符串

toString():将数组转换为字符串,用逗号分隔

var a=[]
var str=a.toString()
console.log(str)

join(‘分隔符’):将数组中所有元素连接到一个字符串,用给定的分隔符链接

var a=[]
var str=a.join('--')
console.log(str)

填充数组元素

fill():用固定值填充数组,不包括终值索引

var a=new arr(10)
a.fill(222)
console.log(a)

过滤数组元素

filter:将数组元素按照给定的条件进行过滤,过滤后的元素在新数组中返回

var words=['','','','']
var result=words.filter(function(word)){
if(word.length>6){
return word
}
})
console.log(result)

练习:数组去重

字符串对象

 <script>
     var name=document.getElementById('username').value 
     var info=''
     if(name.length<3||name.length>10){
         info='用户名长度必须在3-10之间'
     }
     else if(name.toLowerCase().indexOf('admin')!==-1){
         info='用户名不能包含敏感词'
     }
     else{
         info='用户名可用'
     }
     document.getElementById('msg').innerHTML=info
 </script>

值类型和引用类型

值类型:js的简单数据类型 number string boolean null undefined,又称为基本数据类型

包装类型:又称为原始值包装类型,Number String  Boolean

var k=10
console.log(typeof k)
k是值类型
var k=new Number(10)
console.log(typeof k)
k是对象object
var f=new Boolean(true)
f是对象

引用类型:复杂的数据类型,特点是变量中保存的一个引用地址

var obj={
    name='aa'
    sex='男'
    age='25'
}
var fp=obj
是将obj中的地址献给了fp,fp和obj都是指向对象
var obj1={name:'小明',age:18}
var obj2=obj1
console.log(obj1===obj2)
obj2.age=18

当一个对象只被一个变量引用,而这个变量又被重新赋值,那这个对象就会变成没有变量引用,js自动释放内存空间

如果在函数的参数中修改对象的属性或方法,在函数外面引用对象变量访问时的结果也是修改后的

function change(obj){
  obj.name='小红'
}
//在函数参数中修改了对象属性
var stu ={name:'小明';age:18}
change(stu);
console.log(stu.name)

函数参数传递过程,如果是实参向形参传递值(值传递),形参改变不会影响实参

实参向形参传递引用(引用传递),本质传递的是地址,形参改变会改变实参

面向对象编程

面向过程:核心是过程,及分析出解决问题的步骤,用函数将这些过程一一实现,然后调用

面向对象:核心是对象,将需要结果的问题分解成一个个对象,这些对象不是解决问题的步骤,只是描述了在解决问题过程中干什么工作

1.封装性更强,模块化更深   2.更容易实现复杂的业务逻辑3.更容易维护、模块的重复使用

面向对象特征

1.封装性:行为和属性的结合体  2.多态性:同一个消息被不同对象接收后,产生不同效果

3.继承性:子类继承父类的部分属性和方法

ES6:ESMAScript6的面向对象语法

类:具有相同属性和行为的对象集合

对象:类的实例化表现

类是对象的抽象,对象是类的具体体现

class关键字

类的定义

class  类名{

construcuor(参数){

构造方法:初始化类的成员变量

]

属性(成员变量)

行为(成员方法)

}

类名:首字母大写 

成员方法名:动词开头

class Person{
    constructor(name){this.name=name;}
    say(){
        console.log('你好,我叫'+this.name)
    }
    //在类中定义一个叫say的方法
}
var p1=new Person('张三')
p1.say();
//输出结果
// this代表p1
// this.name表示当前对象的属性是name

练习:定义学生类,属性包括姓名name性别sex地址adress电话phone

class Student{
    constructor(name,gender){
        this.name=name
        this.gender=gender
        this.age=18
        //固定值
        this.address=null
        this.phone=null
        //可以修改
    }
    showinfo(){
        let info='姓名'+this.name+'\n'+'性别'+this.sex+'\n'+'年龄'+this.age+'\n'+'地址'+this.address+'\n'
        console.log(info)
    }
}
var s1=new Student('郭靖','男')
s1.age='24'
s1.adress=''
s1.phone=''
s1.showinfo()

创建电脑类

class Computer{
    constructor(){
        this.color=null
        this.weight=null
        this.brand=null
        this.type=null
        //可以修改
    }
    see(){
        console.log('看电影')
    }
    play(){
        console.log('打游戏')
    }
    listen(){
     console.log('听音乐')
    }
    code(){
        console.log('敲代码')
    }
    show(){
      var  info ='品牌'+this.brand+'\n'+'颜色'+this.color+'\n'
      console.log(info)
    }
    
}
var c1=new Computer()
c1.coloe=''
c1.brand=''
c1.type=''
c1.see()
c1.listen()
c1.play()

创建温度类


class Temperature{
    constructor(degree){
       this.degree=degree
    }
    ToFahreheit()
    //把摄氏温度转化为华氏温度
    {
       degree=(this.degree-32)*5/9
       console.log('摄氏温度转化为华氏温度'+degree)
    }
    ToCesius()
    // 把华氏温度转化为摄氏温度
    {
        degree=this.degree*9/5+32
        console.log('华氏温度转化为摄氏温度'+degree)
    }

}
let t=prompt('请输入一个温度')
var tem=new Temperature(t)
tem.ToFahreheit()
tem.ToCesius()

ES5中创建类

1.创建构造函数,在构造函数中定义属性和方法

(1)构造函数名是类名

(2)和使用class创建类的区别

a.构造方法创建类:属性和方法都在构造方法中定义

b.使用class创建类,属性在构造方法中定义

function Person(name,sex){
    // 构造函数,构造函数名是类名,name sex是参数
    this.name=name 
    this.sex=sex 
    // 类的属性
    this.sleep=function(){
        console.log('我在睡觉')
    }
    // 类的方法
    this.eat=function(){
        console.log('我在吃饭')
    }
}
class Person{
    constructor(name,sex){
        this.name=name
        this.sex=sex
    }
    sleep=function(){
       console.log(this.name+'在睡觉')
    }
    eat=function(){
        console.log(this.name+'在吃饭')
    }
}
// 创建对象
var p1=new Person('黄蓉','女')
console.log('姓名:',p1.name)
console.log('性别:',p1.sex)
p1.sleep()
p1.eat()

类的静态(类)成员和实例成员

1.实例成员:成员变量和成员方法:属于类的实例(具体对象)

2.静态成员:包括静态的成员变量和静态成员方法,通过类来定义,创建成员方法时,用static关键字来修饰,通过类名访问,也叫类成员,为所有成员共享

function Student(school,name,sex){
    // this.school=school
    Student.school=s
    // 静态成员变量,为所有成员共享
    this.name=name
    this.sex=sex
    this .display=function(){
        let str='学校'+Student.school+'\姓名'+this.name+'\性别'+this.sex
        console.log(str)
    }
    Student.sayhello=function(){
        console.log('hello'+Student.sayhello)
    }
}
var s1=new Student('西安交通大学','小张','女')
var s2=new Student('西安交通大学','小刘','男')
s1.display()
Student.school='西安邮电大学'

原型对象

每个构造函数都有原型对象,通过构造函数的prototype属性来访问

作用:使用原型对象来共享方法;

对象的原型对象:每一个对象都有一个原型对象,通过——proto——访问

某个构造方法的原型对象和由这个构造方法创造出的对象的原型对象一致

function Person(name){
    this.name=name
     this.show=function(){
         console.log('姓名:',this.name)
     }
     Person.prototype.sayhello=function(){
         console.log('hello 西安邮电大学')
     }
}
console.log(Person.prototype)
// nade 中输出{}空对象
var p1=new Person('三峰')
var p2=new Person('小张')
let flag=(p1.sayhello==p2.sayhello)
console.log(flag)
let flag2=(p1.show==p2.show)
console.log(flag2)
console.log(p1.__proto__)
// node中输出空对象

注意:ES6中通过class关键字创建类本质上还是创建方法

访问对象的构造方法
在原型对象中有constroctor属性指向对象的构造方法

1.构造方法名:prototype.constroctor

2.对象名:constroctor

原型对象的原型对象

1.获取原型对象的原型对象:构造方法名:prototype.__proto__

2.原型对象的原型对象的构造方法:构造方法名:prototype.__proto__.constrocto

let stu={}
// let stu=new Object()
function Student(){}
// console.log(stu.constroctor)输出:[Function:Object]
console.log(stu.prototype.__proto__)
// 输出原型对象的原型对象
console.log(stu.prototype.__proto__.constroctor)
// 输出原型对象的原型对象的构造方法

原型链

构造函数与原型对象

构造函数-----prototype-----原型对象

原型对象-----constroctor------构造函数

实例对象和原型对象

实例对象-----(__proto__)----原型对象

构造方法----(new)---实例对象

Object对象的对象的__proto__属性是null

成员查找机制

let stu2={}
console.log(stu2.__proto__.proto)
// 给内置对象的Array对象添加sum方法,用来给元素求和
Array.prototype.sum=function(){
    let sum=0
    for(let i=0;i<this.length;i++){
        sum+=this[i]
    }
    return sum
}
// 声明数组
var arr=[12,22,33,43,44]
console.log('数组元素之和:',arr.sum())

面对对象

封装性:保护内部操作不被破坏

继承性:在原本的基础上继续进行扩充

多态性:在一个指定的范围之内进行概念的转换

类和对象

类:类是一群具有相同特称或行为的事物的一个统称,是抽象的,不能直接使用,其中特称被称为属性,行为被称为方法

对象:对象是由类创造出来的一个具体存在,可以直接使用,

关系:类是模板,由类创造出对象

类只有一个,对象可以有多个

类定义了什么属性和方法,对象就有什么属性和方法

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值