2020-12-31 第十七天！！

<!DOCTYPE html>

<head>

// var num = Math.random();

// alert(num);//弹出0-1之间的随机数

var a = 1;

var b = 17;

// var num = Math.random()*(b-a)+a;

// alert(num);//弹出10-20之间的随机数

var arr = [];

for(var i=0; i<20; i++){

// var num = Math.floor(Math.random()*(b-a)+a);//向下取整，10-19

var num = Math.floor(Math.random()*(b-a + 1)+a);//向下取整，10-20

arr.push(num);//生成一个数就放进数组

}

alert(arr);//17,20,20,11,11,19,17,16,10,11,16,11,18,13,13,11,17,14,19,19

</script>

</head>

<body>

</body>

</html>

单体创建对象：

<!DOCTYPE html>

<head>

<title>单体创建对象</title>

var Tom = {

// 属性

name:'tom',

age:18,

// 方法

showName:function(){

alert(this.name);

showAge:function(){

alert(this.age);

}

//调用属性

alert(Tom.name);

alert(Tom.age);

//调用方法

Tom.showName();

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>单体创建对象</title>

var Tom = {

// 属性

name:'tom',

age:18,

// 方法

showName:function(){

alert(this.name);

showAge:function(){

alert(this.age);

}

//调用属性

alert(Tom.name);

alert(Tom.age);

//调用方法

Tom.showName();

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>工厂模式创建对象</title>

function Person(name,age,job){

//创建一个空对象

// var o = new Object();//方式一

var o = {};//方式二

o.name = name;

o.age = age;

o.job = job;

o.showName = function(){

alert(this.name);

}

o.showAge = function(){

alert(this.age);

}

o.showJob = function(){

alert(this.job);

}

return o;

}

var Tom = Person('tom',18,'程序猿');

Tom.showJob();

var Jack = Person('jack',19,'攻城狮');

Jack.showJob();

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

this.showName = function(){

alert(this.name);

}

this.showAge = function(){

alert(this.age);

}

this.showJob = function(){

alert(this.job);

}

//new的作用就相当于工厂模式中最开始创建了一个空对象，最后把对象返回

var Bob = new Person('bob',18,'产品汪');

Bob.showJob();

var Alex = new Person('alex',19,'运营喵');

Alex.showJob();

alert(Bob.showName == Alex.showName);//false

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

Person.prototype.showName = function(){

alert(this.name);

}

Person.prototype.showAge = function(){

alert(this.age);

}

Person.prototype.showJob = function(){

alert(this.job);

}

//先去自己的对象中找showName函数，再去构造函数的原型找

var Lucy = new Person('lucy',18,'测试鼠');

//重写自身对象中的方法，不会影响其它对象

Lucy.showName = function(){

alert('我的名字是' + this.name);

}

Lucy.showName();//我的名字是lucy

var Lily = new Person('lily',19,'市场鸡');

Lily.showName();//lily

alert(Lucy.showName == Lily.showName);//false

</script>

</head>

<body>

</body>

</html>

call和apply

/* call和apply的区别

二者都可以改变当前的this，区别在于apply方法要将参数放入数组中再传参*/

function aa(a,b){

alert('我的this是' + this + ',我的a是' + a + ',我的b是' + b);

}

aa(2,3);

aa.call('abc',2,3);//我的this是abc,我的a是2,我的b是3

aa.apply('abc',[2,3])

call和apply都可以调用函数，可以用修改this

传参方式不同 call方法将参数直接放在 apply方法要将参数放入数组中再传参

</script>

函数的继承

//父类

function Fclass(name, age){

this.name = name;

this.age = age;

}

Fclass.prototype.showName = function(){

alert(this.name);

}

Fclass.prototype.showAge = function(){

alert(this.age);

}

//子类

function Sclass(name, age, job){

//调用父类的call方法实现属性的继承

this.job = job;

}

//方法的继承 (父类的实例赋给子类的原型)

Sclass.prototype = new Fclass();

Sclass.prototype.showJob = function(){

alert(this.job);

};

var Driver = new Sclass('tom',18,'老司机')//创建一个子类的实例//

Driver.showJob();

Driver.showAge();

Driver.showName();

</script>

新增选择器

window.onload = function(){

var div1 = document.querySelector('#div1');

console.log(div1);

var lis = document.querySelectorAll('.list li');

console.log(lis.length);//8

}

<div id="div1">这是一个div元素</div>

</ul>

</script>

2020-12-31 第十七天！！

推荐阅读更多精彩内容