This commit is contained in:
asd
2021-05-11 11:33:55 +08:00
parent 011d9328b0
commit c5f18c6051
32 changed files with 2011 additions and 26 deletions

92
zuoye/js/a (2).html Normal file
View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var a = 2
// var obj1 = {
// a: 1,
// fn1: (function (a) {
// this.a = a
// a++
// return function () {
// this.a = a++
// console.log(this)
// console.log(a)
// }
// })(a)
// }
// var fn1 = obj1.fn1
// var fn1=function () {
// this.a = a++
// console.log(this)
// console.log(a)
// }
// console.log(fn1.toString())
// fn1()
// console.log(getA)
// if ('a' in window) {
// var a = ''
// function getA(a) {
// a = a || this.a
// console.log(this.a)
// }
// getA(a)
// }
var c = 3
function getC() {
this.c++
console.log(this,'kkkk')
return function () {
c = this.c * 2
console.log(c)
}
}
var obj3 = {
c: 2,
getC: (function () {
this.c -= 1 //win.c-1 win.c=2
console.log(this.c, this,'sss')
return this.getC //obj3.getc=win.getc
})()
}
// var a=obj3.getC()
// a()
// obj3.getC()()
getC() //win.c++ =>win.c=3
console.log(obj3.getC.toString(),"aaaaaaa")
obj3.getC()
// console.log(obj3.c,window.c)
var f3=obj3.getC;
f3()
// console.log(window.c)
// console.log(obj3.c)
//step1 立即执行函数 => this 指向window win.c-1 -> win.c=2
//step2 getC() this.c -=> win.c++ =>2+1 =>3
//step3 obj3.getC() step1中 obj3.getc= win.getc 所以就是执行win.getc
// 即 winc++ win.c=3
//obj3.getc时 this指向的是obj3this.c操作的是obj3.c , 所以obj3.c 也+1等于3
//step4 f3本身等于win.getc函数 执行f3() 即执行 win.getc() =>win.c++ win.c=4
</script>
</head>
<body>
</body>
</html>

97
zuoye/js/callapply.md Normal file
View File

@@ -0,0 +1,97 @@
1.
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue' };
function changeColor(){
console.log(this.color);
}
changeColor.call(); //red (默认传递参数)
changeColor.call(window); //red
changeColor.call(document); //yellow
changeColor.call(this); //red
changeColor.call(s1); //blue
2
var Pet = {
words : '...',
speak : function (say) {
console.log(say + ''+ this.words)
}
}
Pet.speak('Speak'); // 结果Speak...
var Dog = {
words:'Wang'
}
//将this的指向改变成了Dog
Pet.speak.call(Dog, 'Speak'); //结果: SpeakWang
3
用 apply重写上面两个函数
4
function add(c,d){
return this.a + this.b + c + d;
}
var s = {a:1, b:2};
console.log(add.call(s,3,4)); // 1+2+3+4 = 10
console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14
5.画出原型链
//游戏--->王者---->小乔---->花嫁
6
function C1(name) {
if (name) {
this.name = name;
}
}
function C2(name) {
this.name = name;
}
function C3(name) {
this.name = name || 'join';
}
C1.prototype.name = 'Tom';
C2.prototype.name = 'Tom';
C3.prototype.name = 'Tom';
alert((new C1().name) + (new C2().name) + (new C3().name));
7
function Fn(num) {
this.x = this.y = num;
}
Fn.prototype = {
x: 20,
sum: function () {
console.log(this.x + this.y);
}
};
let f = new Fn(10);
console.log(f.sum === Fn.prototype.sum);
f.sum();
Fn.prototype.sum();
console.log(f.constructor);
8
var print=function(){alert(1);}
function Fn() {
print=function(){alert(2);}
return this;
}
function print(){alert(3);}
Fn.prototype.print=function(){alert(4);}
Fn.print=function(){alert(5);}
print();
Fn.print();
Fn().print();
new Fn.print();
new Fn().print();

BIN
zuoye/js/js/函数.pdf Normal file

Binary file not shown.

BIN
zuoye/js/js/对象1.pdf Normal file

Binary file not shown.

BIN
zuoye/js/js/语句.pdf Normal file

Binary file not shown.

BIN
zuoye/js/js/运算符.pdf Normal file

Binary file not shown.

BIN
zuoye/js/js/递归.pdf Normal file

Binary file not shown.

120
zuoye/js/jsthis.md Normal file
View File

@@ -0,0 +1,120 @@
# this
1
function fn2(){
console.log(this.n)
var n='n'
this.n=10
console.log(n)
}
var obj={fn2:fn2, n:1}
fn2()
obj.fn2()
console.log(obj.n, window.n)
//undefined 'n'
//1 'n'
//10 10
2
function f(){console.log(this)}
var obj={
fn: (function(){
return this.f
})(),
f: function(){console.log(this)}
}
f()
obj.f()
obj.fn()
// window obj obj
3
var n = 10
var obj1={
n:1,
f:function(){this.n++; n=this.n++}
}
obj1.f()
console.log(n) // 2
console.log(obj1.n) // 2
window.setTimeout(obj1.f, 1000)
//2
//3
4
console.log(getA)
if('a' in window){
var a = ''
function getA(a){
a = a||this.a
console.log(this.a)
}
getA(a)
}
5
var a=2
var obj1 = {
a:1,
fn1: (function(a){
this.a = a
a++
return function(){
this.a = a++
console.log(a)
}
})(a)
}
obj1.fn1() // 4
var fn1 = obj1.fn1
fn1() // window.a = 4,a=5
6
var c=3
function getC(){
this.c++
return function (){
c=this.c*2
console.log(c)
}
}
var obj3={
c: 2,
getC:(function(){
this.c -= 1
return this.getC
})()
}
getC() // window.c = 3
obj3.getC() // obj3.c=3
var f3=obj3.getC
f3() // window.c=4
console.log(window.c) // 4
console.log(obj3.c) // 3
for (var i = 1; i <= 5; i++) {
setTimeout( function timer() {
console.log(i);
}, 1000 );
}
上面的代码会输出什么怎么改动上述代码使其依次输出1、2、3、4、5 并说明原因
理论题:
谈谈什么是闭包

Binary file not shown.

Binary file not shown.

BIN
zuoye/js/pdfs/数组.pdf Normal file

Binary file not shown.

120
zuoye/js/this.md Normal file
View File

@@ -0,0 +1,120 @@
# this
1
function fn2(){
console.log(this.n)
var n='n'
this.n=10
console.log(n)
}
var obj={fn2:fn2, n:1}
fn2()
obj.fn2()
console.log(obj.n, window.n)
2
function f(){console.log(this)}
var obj={
fn: (function(){
return this.f
})(),
f: function(){console.log(this)}
}
f()
obj.f()
obj.fn()
3
var n = 10
var obj1={
n:1,
f:function(){this.n++; n=this.n++}
}
obj1.f()
console.log(n)
console.log(obj1.n)
window.setTimeout(obj1.f, 1000)
4
console.log(getA)
if('a' in window){
var a = ''
function getA(a){
a = a||this.a
console.log(this.a)
}
getA(a)
}
5
var a=2
var obj1 = {
a:1,
fn1: (function(a){
this.a = a
a++
return function(){
this.a = a++
console.log(a)
}
})(a)
}
obj1.fn1()
var fn1 = obj1.fn1
fn1() // window.a = 4,a=5
6
var c=3
function getC(){
this.c++
return function (){
c=this.c*2
console.log(c)
}
}
var obj3={
c: 2,
getC:(function(){
this.c -= 1
return this.getC
})()
}
getC()
obj3.getC()
var f3=obj3.getC
f3()
console.log(window.c)
console.log(obj3.c)
for (var i = 1; i <= 5; i++) {
setTimeout( function timer() {
console.log(i);
}, 1000 );
}
上面的代码会输出什么怎么改动上述代码使其依次输出1、2、3、4、5 并说明原因
理论题:
谈谈什么是闭包

148
zuoye/js/thislx.md Normal file
View File

@@ -0,0 +1,148 @@
# this练习
document.write的题目 需要写出在页面上打印的结果
1. 下面代码的执行结果是什么 为什么
```
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// 显示对象的数据
document.getElementById("demo").innerHTML = person.fullName();
```
2. 下面代码的执行结果是什么 为什么
```
var x = this;
document.getElementById("demo").innerHTML = x;
```
3. 下面代码的执行结果是什么 为什么
```
"use strict";
var x = this;
document.getElementById("demo").innerHTML = x;
```
4. 下面代码的执行结果是什么 为什么
```
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
```
5. 下面代码的执行结果是什么 为什么
```
"use strict";
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
```
6. 下面代码的执行结果是什么 为什么
```
<body>
<h2>JavaScript <b>this</b> 关键字</h2>
<button onclick="this.style.display='none'">点我后我就消失了</button>
</body>
```
7. 下面代码执行结果是什么 为什么
```
var person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
// 显示表单数据
document.getElementById("demo").innerHTML = person.myFunction();
```
8. 把第7题的对象中的属性和方法挨个打印在页面上
9. 下面代码的执行结果是什么 为什么
```
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// 显示对象的数据
document.getElementById("demo").innerHTML = person.fullName();
```
10. 下面代码的执行结果是什么 为什么
```
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2);
```
11. 下面代码的执行结果是什么 为什么
```
function speak(){
var name = this.name
console.log(`Hello I am ${name}`)
}
var me = {
name: 'a',
speak: speak
}
var you = {
name: 'b',
speak: speak
}
me.speak()
you.speak()
```
12. 下面代码的执行结果是什么 为什么
```
function fn(){
console.log(this.name)
}
fn.name = 'xxx'
fn()
```

View File

@@ -1,5 +1,154 @@
# 函数
* jsinfo里的练习
* 简介函数语法
* 函数名命名规则
* 函数包含哪几部分
* 函数调用的三种情况
* 简述函数返回值
* 下面代码的执行结果为
```
var x = myFunction(7, 8);
function myFunction(a, b) {
return a * b;
}
```
* 为什么要使用函数
* 简单介绍局部变量和全局变量
* 下面两段代码的执行结果分别是什么 并说明原因
```
function myFunction() {
var carName = "Volvo";
}
console.log(carName)
```
```
function myFunction() {
var carName = "Volvo";
console.log(carName)
}
```
* 函数如何返回值,如何接收
* 下面代码执行结果是什么 为什么
```
function sum(iNum1, iNum2) {
return iNum1 + iNum2;
}
```
* 下面代码执行结果是什么 为什么
```
function sum(iNum1, iNum2) {
console.log(iNum1 + iNum2);
}
```
* 下面代码执行结果是什么 为什么
```
function sum(iNum1, iNum2) {
console.log(iNum1 + iNum2);
}
sum()
```
* 下面代码执行结果是什么 为什么
```
function sum(iNum1, iNum2) {
return iNum1 + iNum2;
}
var iResult = sum(1,1);
alert(iResult);
```
* 下面代码执行结果是什么 为什么
```
function sum(iNum1, iNum2) {
return iNum1 + iNum2;
alert(iNum1 + iNum2);
}
```
* 下面代码的执行结果为
```
function sayHi(sMessage) {
if (sMessage == "bye") {
return;
}
alert(sMessage);
}
```
* 如何检测参数的个数
* 下面代码的执行结果是多少
```
function howManyArgs() {
alert(arguments.length);
}
howManyArgs("string", 45);
howManyArgs();
howManyArgs(12);
```
* 什么是arguments 对象
* 下面代码的执行结果
```
function sayHi() {
if (arguments[0] == "bye") {
return;
}
alert(arguments[0]);
}
```
* 下面代码的执行结果是什么
```
function howManyArgs() {
alert(arguments.length);
}
howManyArgs("string", 45);
howManyArgs();
howManyArgs(12);
```
* 什么是函数重载
* 下面代码的执行结果是什么
```
function doAdd() {
if(arguments.length == 1) {
alert(arguments[0] + 5);
} else if(arguments.length == 2) {
alert(arguments[0] + arguments[1]);
}
}
doAdd(10);
doAdd(40, 20);
```
* 通过new function() 的系形式重新定义下面的对象
```
function sayHi(sName, sMessage) {
alert("Hello " + sName + sMessage);
}
```
* Function对象的属性和方法
* 编写一个函数,计算三个数字的大小,按从小到大顺序输出
* 编写一个函数,计算任意两个数字之间所能组成的奇数个数,数字必须是个位数
比如: 计算0-3之间能组成的奇数个是01、21、03、13、23、31

View File

@@ -1,4 +1,65 @@
# 对象练习
* 什么是面向对象 什么是面向过程
* 分别介绍对象的三大特征
* 对象也是一个变量,但对象可以包含多个值(多个变量),每个值以 对呈现。
* 定义一个对象 包含下列属性 name age sex addr(居住地) job(职业)
包含下列方法
eat, sleep, playgame, watchtv ,read
函数体内自定义内容 不可为空
* 给上面的题里的对象添加 height(身高) weight(体重) 属性并赋值
* 给上面题里的对象添加 下列方法
meituan(点外卖 参数需要传手机号和居住地址 想吃的东西 返回下单成功)
cook(做饭 需要传入时间 判断当前是哪一顿饭)
travel(需要传入目的地 返回我去哪里玩啦)
listenmusic(传入你喜欢的歌手 控制台打印最喜欢的曲子)
work传入上班时间和下班时间 判断是否为996
* 访问上面对象定义的以及添加后的所有属性(两种方式访问 先指明可以通过什么方式访问)
格式为 如name字段: 姓名:+name的属性值
通过调用不同的方法来制定行程(按照正常顺序调用上面对象的每一个方法)
* 探索对象创建的其他方式 每种都举例尝试(不得少于三个方法 五个属性)
* 探索遍历函数的所有属性
* 五大主流浏览器的名字为键 内核为值 创建一个对象
* 下面代码的执行结果是:
```
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
return [this.firstname,this.lastname,this.age,this.eyecolor,this]
}
var myFather=new person("John","Doe",50,"blue");
var myMother=person("Sally","Rally",48,"green");
console.log(myFather)
console.log(myMother)
```
* 下面代码的执行结果是什么 为什么
```
const user = {
name: "John"
};
user.name = "Pete";
alert(user.name);
```
* 如何访问下面对象的bird属性
对象为:
var user={
fire:"fox",
likes:{
type:"animal",
bird:"fly"
}
}
给user对象添加一个属性名是name 值是user
给user对象添加一个方法 触发后可以删除user对象的likes里面的type
创建一个对象 属性值为用户输入的自定义字符(最少三个属性)
* 创建一个对象 包含如下内容
* code 值为200
* msg 值为"请求成功"

View File

@@ -1,4 +1,46 @@
# 数组
* 什么是数组
* 创建一个长度为4的内容为字符串的数组 并把数组中的元素和数组长度打印在页面上
* 下面这种数组声明方式对嘛?为啥
```
var cars = [
"Saab",
"Volvo",
"BMW"
];
```
* 下面这种数组声明方式对嘛?为啥
```
var cars = [
"Saab",
"Volvo",
"BMW",
];
```
* 把第1题的数组用new关键字重新声明一遍
* 如何访问数组中的元素
* 定义一个长度为10的没有空元素的数组内容正规一点哈 别整敷衍的abcdefg 1234567...这样的)
不通过遍历挨个输出每个元素的值(输出的方式随意)
* 定义个数组里面装着 五大主流浏览器 然后通过 下标把浏览器名字改成对应的内核(不去重)
* 通过遍历方法对浏览器内核的数组去重
* 通过splice方法完成五大主流浏览器题目的效果
* typeof 一个数组的返回结果为
* 数组中能存储对象嘛?能存储函数嘛? 能存储数组嘛? 如果能请举例 不能的话说明理由
* 列举数组相关的方法 并说明作用每个方法附带两个例子
* 定义一个长度为5的数组 并访问最后一个元素(用两种方式)
* 定义一个长度为 20的数组用三种方式实现数组的遍历并输出数组中每个元素的值自己拓充foreach
* 使用4种方式给数组添加新元素
* 如何准确的识别是否为数组
* 为什么要避免使用new array创建数组
* 计算给定数组 arr 中所有元素的总和
输入 [ 1, 2, 3, 4 ]
@@ -12,12 +54,3 @@
输入: [1, 2, 4, 4, 3, 4, 3], 4
输出3
* 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。答案可以按 任意顺序 返回。
给出数字到字母的映射如下(与电话按键相同)。注意 1 不对应任何字母。
![image-20210324153432392](E:\web\lessons\课件\zuoye\js\js\语句.assets\image-20210324153432392.png)
输入digits = "23"
输出:["ad","ae","af","bd","be","bf","cd","ce","cf"]