aaaa
This commit is contained in:
@@ -1,16 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<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>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
|
||||
<title>性格测试</title>
|
||||
<style type="text/css">
|
||||
#no1ul{
|
||||
list-style:none;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
.close{
|
||||
display:none;
|
||||
}
|
||||
.show{
|
||||
color:#990000;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function showTestResult(){
|
||||
var radioNodes = document.getElementsByName("answer");
|
||||
var resultNodes = document.getElementsByName("result");
|
||||
//健壮性判断
|
||||
var flag = false;
|
||||
for(var x=0;x<radioNodes.length;x++){
|
||||
if(radioNodes[x].checked){
|
||||
flag = true;
|
||||
showOne(resultNodes[x]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(!flag){
|
||||
showOne(resultNodes[4]);
|
||||
}
|
||||
}
|
||||
//我们希望只显示一个测试结果
|
||||
function showOne(node){
|
||||
var resultNodes = document.getElementsByName("result");
|
||||
for(var x=0;x<resultNodes.length;x++){
|
||||
//先全部close
|
||||
resultNodes[x].className = "close";
|
||||
}
|
||||
//再显示这个节点
|
||||
node.className = "show";
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
var time=1
|
||||
var newtime=time++
|
||||
console.log(time,newtime)
|
||||
</script>
|
||||
<h2>性格测试</h2>
|
||||
<div>
|
||||
<h3>问题</h3>
|
||||
<span>每天下班回家一进门，你会怎样脱掉鞋子?</span>
|
||||
<ul id="no1ul">
|
||||
<li><input type="radio" name="answer" value="1"/>A、很随意的脱下鞋子，不在乎如何摆放。</li>
|
||||
<li><input type="radio" name="answer" value="2"/>B、脱下鞋后，把鞋尖朝向门外的方向整齐排好。</li>
|
||||
<li><input type="radio" name="answer" value="3"/>C、脱下鞋后，把鞋尖朝屋内的方向整齐排好。</li>
|
||||
<li><input type="radio" name="answer" value="4"/>D、不自己脱鞋，而是由同住在一起的人帮你脱下鞋子。</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<input type="button" value="查看测试结果" onclick="showTestResult()"/>
|
||||
<hr/>
|
||||
<div id="a" name="result" class="close">
|
||||
A：这样的人，比较喜欢自由，认为生活舒适即可，不在意细节，完全不考虑社会体制和规则的类型，以追求自我欲望为中心。
|
||||
较冲动，喜欢自由奔放的生活方式。比较自我的人，这种人是为了追求欲望而行动的类型，仍然持续幼儿时期的性格。
|
||||
如果往好的方向发展，当然很好；但是，如果往坏的方向发展，结果会很令人惊叹。
|
||||
</div>
|
||||
<div id="b" name="result" class="close">
|
||||
B：这样的人很能吃苦，用自己的辛勤来享受生活。凡事都要准备得万全，是追求完美的人。容易在社会上树敌很多，对于同事也毫不放松。
|
||||
他们会压抑感情，喜怒不形于色，遵守社会规范而行动。但是，这种人的心里面防卫防备很严，即使认为是为了社会公益而做的事情，也会引起很多的误解。
|
||||
你的道德心和伦理感相当强烈，建议最好不要给自己过多的负担以免吃不消。
|
||||
</div>
|
||||
<div id="c" name="result" class="close">
|
||||
C：这样的人有自己的思考方式，有自己的做事风格，会适当地考虑方式方法，是办事周到的人。这样的人骄傲，但是又适度，所以会给人以成熟自信的感觉。
|
||||
</div>
|
||||
<div id="d" name="result" class="close">
|
||||
D：这样脱鞋方式的人，不用多说，一定是比较任性的人，与其说是任性，倒不如说是被完全惯坏了，因为周围的人都宠她，她要做的事情，都会由别人帮她做的很好，
|
||||
不是说她自己没由能力，是因为她的依赖性很强，所以这样的人必须注意与周围环境的协调，否则终有一天吃大亏。
|
||||
</div>
|
||||
<div id="e" name="result" class="close">
|
||||
E：你很皮！
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
zuoye/js/dom.assets/image-20210519165912729.png
Normal file
BIN
zuoye/js/dom.assets/image-20210519165912729.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
zuoye/js/dom.assets/image-20210519165917810.png
Normal file
BIN
zuoye/js/dom.assets/image-20210519165917810.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
37
zuoye/js/dom.md
Normal file
37
zuoye/js/dom.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# dom
|
||||
1. 点击按钮时，显示和隐藏盒子。
|
||||
|
||||
2. 鼠标悬停时，显示二维码大图
|
||||
|
||||
3. 点击按钮禁用文本框/解禁文本框
|
||||
|
||||
4. 文本框获取焦点/失去焦点（淘宝 京东的搜索框效果）
|
||||
|
||||
5. 用户注册信息错误时，输入框失去焦点后，高亮显示。
|
||||
|
||||
6. 全选和反选（仿京东购物车）
|
||||
|
||||
7. 电子时钟 （时间会更新）
|
||||
|
||||
|
||||
|
||||
|
||||
8. 随机点名 通过math.radom取随机数实现随机点名 名字集合放在数组里
|
||||
|
||||
|
||||
|
||||
|
||||
9. 获取验证码，并验证
|
||||
|
||||
html部分：在输入框输入验证码，验证是否一致，点击更换验证码内容
|
||||
验证：获取输入框内容，与验证码内容匹配
|
||||
|
||||
|
||||
10. 性格测试
|
||||
类似于这样 四个选项对应不同的结果
|
||||
|
||||
|
||||
|
||||
11. 仿写 todolist的备忘录功能 实现要做项的增删改查
|
||||
|
||||
12. 在html上写一个表格 包括姓名 年龄 性别 住址 职业 通过js 做信息的增删改查
|
||||
BIN
zuoye/js/js/dom.pdf
Normal file
BIN
zuoye/js/js/dom.pdf
Normal file
Binary file not shown.
BIN
zuoye/js/pdfs/预编译作用域.pdf
Normal file
BIN
zuoye/js/pdfs/预编译作用域.pdf
Normal file
Binary file not shown.
@@ -145,4 +145,203 @@ function fn(){
|
||||
}
|
||||
fn.name = 'xxx'
|
||||
fn()
|
||||
|
||||
```
|
||||
|
||||
13. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function foo() {
|
||||
var a = 2;
|
||||
this.bar();
|
||||
}
|
||||
function bar() {
|
||||
console.log( this.a );
|
||||
}
|
||||
foo();
|
||||
|
||||
```
|
||||
|
||||
14. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function foo(){
|
||||
console.log(this.a)
|
||||
}
|
||||
var a = 2
|
||||
foo()
|
||||
|
||||
```
|
||||
|
||||
15. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function foo() {
|
||||
console.log( this.a );
|
||||
}
|
||||
var obj = {
|
||||
a: 2,
|
||||
foo: foo
|
||||
};
|
||||
obj.foo();
|
||||
|
||||
```
|
||||
|
||||
14. 下面的fn中的this指向谁
|
||||
```
|
||||
obj1.obj2.obj3.fn()
|
||||
```
|
||||
|
||||
15. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function foo() {
|
||||
console.log( this.a );
|
||||
}
|
||||
var obj = {
|
||||
a: 2,
|
||||
foo: foo
|
||||
};
|
||||
var bar = obj.foo; // 函数别名!
|
||||
var a = "xxxxx"
|
||||
bar();
|
||||
|
||||
```
|
||||
|
||||
16. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function foo() {
|
||||
console.log( this.a );
|
||||
}
|
||||
var obj = {
|
||||
a: 2,
|
||||
foo: foo
|
||||
};
|
||||
var a = "xxxxx"
|
||||
setTimeout( obj.foo ,100);
|
||||
|
||||
```
|
||||
|
||||
17. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function foo(something) {
|
||||
console.log( this.a, something );
|
||||
return this.a + something;
|
||||
}
|
||||
function bind(fn, obj) {
|
||||
return function() {
|
||||
return fn.apply( obj, arguments );
|
||||
};
|
||||
}
|
||||
var obj = {
|
||||
a:2
|
||||
};
|
||||
var bar = bind( foo, obj );
|
||||
var b = bar( 3 ); // 2 3
|
||||
console.log( b );
|
||||
|
||||
|
||||
```
|
||||
|
||||
18. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
const test = {
|
||||
prop: 42,
|
||||
func: function() {
|
||||
return this.prop;
|
||||
},
|
||||
};
|
||||
|
||||
console.log(test.func());
|
||||
|
||||
```
|
||||
|
||||
19. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
console.log(this === window);
|
||||
|
||||
a = 37;
|
||||
console.log(window.a);
|
||||
|
||||
this.b = "MND";
|
||||
console.log(window.b)
|
||||
console.log(b)
|
||||
|
||||
```
|
||||
|
||||
20. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function f1(){
|
||||
return this;
|
||||
}
|
||||
//在浏览器中：
|
||||
f1() === window; //在浏览器中，全局对象是window
|
||||
|
||||
//在Node中：
|
||||
f1() === globalThis;
|
||||
|
||||
|
||||
```
|
||||
|
||||
21. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
function f2(){
|
||||
"use strict"; // 这里是严格模式
|
||||
return this;
|
||||
}
|
||||
|
||||
f2() === undefined;
|
||||
|
||||
```
|
||||
|
||||
22. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
var obj = {a: 'Custom'};
|
||||
var a = 'Global';
|
||||
|
||||
function whatsThis() {
|
||||
return this.a;
|
||||
}
|
||||
|
||||
whatsThis();
|
||||
whatsThis.call(obj);
|
||||
whatsThis.apply(obj);
|
||||
|
||||
```
|
||||
|
||||
23. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
function C(){
|
||||
this.a = 37;
|
||||
}
|
||||
|
||||
var o = new C();
|
||||
console.log(o.a);
|
||||
|
||||
|
||||
function C2(){
|
||||
this.a = 37;
|
||||
return {a:38};
|
||||
}
|
||||
|
||||
o = new C2();
|
||||
console.log(o.a);
|
||||
|
||||
```
|
||||
|
||||
24. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
<button onclick="alert(this.tagName.toLowerCase());">
|
||||
Show this
|
||||
</button>
|
||||
|
||||
|
||||
```
|
||||
232
zuoye/js/原型链题目.md
Normal file
232
zuoye/js/原型链题目.md
Normal file
@@ -0,0 +1,232 @@
|
||||
# 原型链题目
|
||||
|
||||
## 1 、prototype和__proto__的概念（简答题）
|
||||
|
||||
prototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。
|
||||
|
||||
__proto__是一个对象拥有的内置属性，是JS内部使用寻找原型链的属性。
|
||||
|
||||
## 2、prototype和__proto__的区别？
|
||||
|
||||
prototype是函数的内置属性，__proto__是对象的内置属性
|
||||
|
||||
## 3、js中的原型链以及最顶端是什么？（填空题）
|
||||
|
||||
Object.prototype
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 4、以下代码会输出什么？（）（）（）（）（）（填空题）
|
||||
|
||||
```
|
||||
function Foo() {
|
||||
getName = function() {
|
||||
alert(1)
|
||||
};
|
||||
return this;
|
||||
}
|
||||
Foo.getName = function() {
|
||||
alert(2)
|
||||
};
|
||||
Foo.prototype.getName = function() {
|
||||
alert(3)
|
||||
};
|
||||
var getName = function() {
|
||||
alert(4)
|
||||
};
|
||||
|
||||
function getName() {
|
||||
alert(5)
|
||||
};
|
||||
Foo.getName(); //2
|
||||
getName(); //4
|
||||
Foo().getName() // 1
|
||||
getName(); //1
|
||||
new Foo.getName(); //2
|
||||
```
|
||||
|
||||
答案：2 4 1 1 2
|
||||
|
||||
注释： getname() 在调用的时候 ，前面声明了两个getname函数 一个是function通过函数声明 另一个是通过 var 也就是函数表达式声明函数
|
||||
|
||||
根据预编译的过程 ，函数表达式和函数声明都会发生变量提升
|
||||
|
||||
var getname=function(){alert(4)}
|
||||
|
||||
function getname(){alert(5)}
|
||||
|
||||
|
||||
|
||||
过程：
|
||||
|
||||
var getname;
|
||||
|
||||
funciton getname(){alert(5)}
|
||||
|
||||
getname=function(){alert(4)}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5、以下代码会输出什么？（）（填空题）
|
||||
|
||||
```
|
||||
function A() {
|
||||
this.do = function() {
|
||||
return 'foo'
|
||||
}
|
||||
}
|
||||
A.prototype = function() {
|
||||
this.do = function() {
|
||||
return 'bar'
|
||||
}
|
||||
}
|
||||
var x = new A().do()
|
||||
console.log(x)
|
||||
```
|
||||
|
||||
答案：foo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 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';
|
||||
console.log((new C1().name)+'/' + (new C2().name)+'/' + (new C3().name));
|
||||
```
|
||||
|
||||
答案：Tom/undefined/join
|
||||
|
||||
new c1().name 已知 c1中没有name属性（实例化的时候没传参数） 所以在访问name属性的时候 会访问c1原型中的name属性 即后面赋值原型的语句 C1.prototype.name = 'Tom'; c2在访问name属性的时候 会先从c2内部找 已知 c2内部已经有 this.name=name了 虽然在实例化的时候没有传入参数作为name的值 但是this.name赋值的步骤没有经过任何条件判断 所以会赋值为 undefined new c3().name c3.name会先从c3的实例对象找 已知 c3的实例对象中this.name也是没有任何条件判断必然会执行 他的值是如果name有值就是传入的name的值 如果没有传入参数name的值 就是join 实例化的时候没有传参数 所以是join
|
||||
|
||||
|
||||
|
||||
## 7、以下代码会输出什么？（）（）（）（填空题）
|
||||
|
||||
```
|
||||
function A() {};
|
||||
function B(a) {
|
||||
this.a = a;
|
||||
}
|
||||
function C(a) {
|
||||
if (a) {
|
||||
this.a = a;
|
||||
}
|
||||
}
|
||||
A.prototype.a = 1;
|
||||
B.prototype.a = 1;
|
||||
C.prototype.a = 1;
|
||||
console.log(new A().a);
|
||||
console.log(new B().a);
|
||||
console.log(new C(2).a);
|
||||
```
|
||||
|
||||
答案：1 undefined 2
|
||||
|
||||
分析：首先看当前构造函数是否定义这个属性，若有直接输出，否则在其原型链上依次查找。
|
||||
A：原型链查找到 a=1；B：函数本身有 a属性；C：函数先判断参数；若参数的布尔值为真则输出 a的值,否则输出原型链上a的值
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 8、以下代码会输出什么？（）（）（）（）（填空题）
|
||||
|
||||
```
|
||||
var F = function() {};
|
||||
Object.prototype.a = function() {
|
||||
console.log("a()");
|
||||
};
|
||||
Function.prototype.b = function() {
|
||||
console.log("b()");
|
||||
};
|
||||
var f = new F();
|
||||
F.a();
|
||||
F.b();
|
||||
f.a();
|
||||
f.b();
|
||||
```
|
||||
|
||||
答案：a() b() a() 报错
|
||||
|
||||
分析：
|
||||
函数内部和函数原型上没有 a，沿着其原型链查找属性。
|
||||
f.b()，f 的构造函数是 F 而非 Function ，从上述原型链图观察，f 的原型链查找不到 Function的原型。
|
||||
|
||||
|
||||
|
||||
F.a() 因为F是 函数 继承自 Function Function又继承自 Object 所以a属性不在F中时会按顺序查找到object.prototype.a的结果为 a()
|
||||
|
||||
F.b同理
|
||||
|
||||
f.a() 因为f是通过F函数构造出的对象 所以 他属于object 能访问object.prototype 但是不属于 function 所以不能访问 function.prototype
|
||||
|
||||
所以 f.b()报错
|
||||
|
||||
|
||||
|
||||
## 9、以下代码会输出什么？（）（）（）（）（填空题）
|
||||
|
||||
```
|
||||
var A=function(){}
|
||||
A.prototype.n=1
|
||||
var b=new A()
|
||||
A.prototype={
|
||||
n:2,
|
||||
m:3
|
||||
}
|
||||
var c=new A()
|
||||
console.log(b.n,b.m,c.n,c.m)
|
||||
```
|
||||
|
||||
答案：1 undefined 2 3
|
||||
|
||||
## 10、f有方法a吗？有方法b吗？（）（）（填空题）
|
||||
|
||||
```
|
||||
var F = function () {}
|
||||
Object.prototype.a = function () {}
|
||||
Function.prototype.b = function () {}
|
||||
|
||||
var f = new F()
|
||||
```
|
||||
|
||||
答案：有a 没有b
|
||||
|
||||
## 11、以下代码会输出什么？（）（）（）（）（填空题）
|
||||
|
||||
```
|
||||
function Person(){}
|
||||
Person.prototype.n=1
|
||||
var p1=new Person()
|
||||
Person.prototype={
|
||||
n:2,
|
||||
m:3
|
||||
}
|
||||
var p2=new Person()
|
||||
console.log(p1.n,p1.m,p2.n,p2.m)
|
||||
|
||||
```
|
||||
|
||||
答案：1 undefined 2 3
|
||||
BIN
zuoye/js/原型链题目.pdf
Normal file
BIN
zuoye/js/原型链题目.pdf
Normal file
Binary file not shown.
178
zuoye/js/基础 - 副本.md
Normal file
178
zuoye/js/基础 - 副本.md
Normal file
@@ -0,0 +1,178 @@
|
||||
# js 基础练习
|
||||
* 写出三种种js引入方式并举例
|
||||
1. 外部引入 ```<script src="./main.js"></script>```
|
||||
2. 内部引入 ```<script>alert("hello world)</script> ```
|
||||
3. 在dom元素上使用script ``` <button onclick="save()">提交</button> ```
|
||||
* 下面两段代码，说明js文件的加载顺序并解释原因
|
||||
demo1:
|
||||
|
||||
```
|
||||
<script async src="js/vendor/jquery.js"></script>
|
||||
<script async src="js/script2.js"></script>
|
||||
<script async src="js/script3.js"></script>
|
||||
|
||||
```
|
||||
|
||||
demo2
|
||||
```
|
||||
<script defer src="js/vendor/jquery.js"></script>
|
||||
<script defer src="js/script2.js"></script>
|
||||
<script defer src="js/script3.js"></script>
|
||||
|
||||
```
|
||||
|
||||
第一个（async 修饰的） 没法判断加载顺序
|
||||
第二个（defer修饰的） 先加载 jquery.js 然后是 script2.js 最后是 script3.js
|
||||
|
||||
* 如果浏览器不支持javascript的语法需要在页面上提示您的浏览器不支持javascript 运行 如何实现
|
||||
在html 文件中写
|
||||
```<noscript>您的浏览器不支持javascript 运行</noscript>```
|
||||
|
||||
|
||||
* 列举几种js 交互方式
|
||||
consol.log() document.write() alert() prompt() confirm()
|
||||
|
||||
* js的组成
|
||||
ECMAScript DOM BOM
|
||||
* JavaScript 如何与 HTML 和 CSS 协同工作
|
||||
html(结构) css（样式） js(行为)
|
||||
|
||||
|
||||
* 在外部文件中放置js脚本有什么优势
|
||||
|
||||
①简化HTML代码：将HTML代码中的JavaScript代码独立成外部文件，可以简化HTML文档中的代码，让HTML代码看起来更直观、清楚。
|
||||
|
||||
②编程模块化：可以将多个HTML文档中相同的JavaScript代码独立成外部文件，方便在多个HTML文档里引用。此时外部脚本文件相当于程序中的一个模块，如果修改该脚本文件的内容，所有引用该脚本文件的HTML文档中的部分也会被修改。
|
||||
|
||||
③代码易于维护：将JavaScript代码独立成外部文件，如果需要修改其中功能，只需要修改外部文件中的代码。如果所有JavaScript代码都嵌入HTML代码之中，那么即使要修改相同部分的内容，也必须修改所有HTML文件，修改的工作量较大。
|
||||
|
||||
④增加安全性：将JavaScript代码独立成外部文件，在查看HTML源代码时看不到JavaScript代码的内容，无形之中减少了受攻击的机会。
|
||||
|
||||
⑤加速浏览：浏览器会自动缓存网络中的文件。当一个外部脚本文件使用之后，浏览器会将其放入缓存中。如果另外一个HTML文档引用该外部脚本文件，浏览器就可以直接从缓存中读取该文件，而不需要从网络中下载，因此，会加快加载网页的速度。
|
||||
|
||||
⑥引用其他服务器上的文件的脚本文件：script元素中的src属性值是一个标准的URL，因此在HTML文档中除了可以引用当前服务器中的脚本文件，还可以引用其他服务器中的脚本文件。
|
||||
|
||||
主要是1，2，3
|
||||
|
||||
|
||||
变量和常量
|
||||
* 如何交换两个变量的值
|
||||
* 字面量和变量的关系及区别
|
||||
1.字面量是指由字母，数字等构成的字符串或者数值，它只能作为右值出现,(右值是指等号右边的值，如：int a=123这里的a为左值，123为右值。)
|
||||
|
||||
2.常量和变量都属于变量，只不过常量是赋过值后不能再改变的变量，而普通的变量可以再进行赋值操作。
|
||||
* 变量命名规则
|
||||
|
||||
* 下面代码执行结果为 原因是
|
||||
```
|
||||
var obj1 = new Object();
|
||||
var obj2 = obj1;
|
||||
obj1.name = "Nicholas";
|
||||
alert(obj2.name);
|
||||
|
||||
```
|
||||
结果是 Nicholas
|
||||
原因（简单数据类型和复杂数据类型的区别）
|
||||
1.内存的分配不同
|
||||
基本数据类型存储在栈中
|
||||
复杂数据类型存储在堆中，栈中存储的变量 是指向堆中的引用地址
|
||||
2.访问机制不同
|
||||
基本数据类型是按值访问
|
||||
复杂数据类型是按引用访问
|
||||
|
||||
|
||||
* 用一行语句声明5个变量 其中值包有一个只声明不赋值 其他分别为null 数值 字符串 布尔
|
||||
数据类型
|
||||
|
||||
* 数据类型可以分为哪几类 有什么区别
|
||||
|
||||
* 如何实现功能 当浏览器不支持javascript脚本的时候 给用户在页面上提示“您的浏览器不支持javascript 脚本，请尽快升级浏览器”
|
||||
* typeof 检测数据类型的返回值都有什么 分别代表什么意思
|
||||
* 类型转换相关
|
||||
1. 输入两个数字，点求和弹出两个数字相加的结果。
|
||||
1. 输入框的默认value进行相加，结果是进行了字符串相加，而非数字相加。
|
||||
2. 将value的值进行parseInt，之后再相加，就是数字相加的结果了。
|
||||
如果输入12+abc，会是什么结果？ 你得到了什么结论
|
||||
3.isNaN，检测输入框的内容是不是NaN。true为真，false为假。
|
||||
4.写出下面的执行结果
|
||||
1 + '1' 11
|
||||
true + 0 1
|
||||
{}+[]
|
||||
4 + {}
|
||||
4 + [1]
|
||||
'a' + + 'b'
|
||||
console.log ( [] == 0 )
|
||||
console.log ( ! [] == 0 )
|
||||
console.log ( [] == ! [] )
|
||||
console.log ( [] == [] )
|
||||
console.log({} == !{})
|
||||
console.log({} == {})
|
||||
|
||||
1. 定义一个变量存储数据1234，分别输出个位，十位，百位，千位数字
|
||||
2. 输入两个数字，相减四舍五入（.toFixed() 把保留几位小数写在括号里）
|
||||
3. 从弹框中输入一个字符，判断这个字符是否是英文字母，数字，汉字（4e00-9fa5）
|
||||
4. 下面代码的输出结果
|
||||
console.log(10 + " cats");
|
||||
console.log(10 * " cats");
|
||||
Boolean([])
|
||||
console.log(10 + "2");
|
||||
console.log(10 - "2");
|
||||
Number("3")
|
||||
console.log(10 / "2");
|
||||
console.log(10 * "2");
|
||||
String(false)
|
||||
console.log(10 * " 2");
|
||||
console.log("10" * "2");
|
||||
console.log(Object(undefined));
|
||||
console.log(Object(null));
|
||||
|
||||
5. 下面代码的执行结果
|
||||
var str = "abc";
|
||||
str[0] = "d";
|
||||
|
||||
console.log(str[1]="e");
|
||||
console.log(str[0]);
|
||||
console.log(str);
|
||||
var num = [1,2,3];
|
||||
num[0] = "a";
|
||||
|
||||
console.log(num);
|
||||
|
||||
1. 下面代码的执行结果
|
||||
var obj1 = {age: 22};
|
||||
var obj2 = obj1;
|
||||
|
||||
console.log(obj1 === obj2);
|
||||
obj2.age = 18;
|
||||
console.log(obj1 === obj2);
|
||||
|
||||
2. 解释10，11结果出现的原因 并归纳基本数据类型和引用数据类型的区别
|
||||
|
||||
3. 下面代码的输出结果
|
||||
var obj1 = {age: 22};
|
||||
var obj2 = obj1;
|
||||
console.log(obj1 === obj2);
|
||||
obj2.age = 18;
|
||||
console.log(obj1 === obj2);
|
||||
console.log("1" instanceof String);
|
||||
console.log(("1").constructor === String);
|
||||
console.log((1).constructor === Number);
|
||||
console.log((true).constructor === Boolean);
|
||||
console.log(([]).constructor === Array);
|
||||
console.log((function() {}).constructor === Function);
|
||||
console.log(({}).constructor === Object);
|
||||
console.log(1 instanceof Number);
|
||||
console.log(true instanceof Boolean);
|
||||
console.log([] instanceof Array);
|
||||
console.log(function(){} instanceof Function);
|
||||
console.log({} instanceof Object);
|
||||
var test = Object.prototype.toString;
|
||||
console.log(test.call("str"));
|
||||
console.log(test.call(1));
|
||||
console.log(test.call(true));
|
||||
console.log(test.call(null));
|
||||
console.log(test.call(undefined));
|
||||
console.log(test.call([]));
|
||||
console.log(test.call(function() {}));
|
||||
console.log(test.call({}));
|
||||
|
||||
220
zuoye/js/运算符 - 副本.md
Normal file
220
zuoye/js/运算符 - 副本.md
Normal file
@@ -0,0 +1,220 @@
|
||||
# 运算符相关
|
||||
1. 两个自定义变量进行相等对比，弹出运算结果。 （分别放两个按钮 第一个弹出==的比较结果 第二个弹出 ===的比较结果）
|
||||
2. 完成计算器的功能 输入两个数 输出计算结果 具体计算功能包含 加减乘除成方取余 每个计算方式分别放按钮 点击输出计算结果
|
||||
3. 用js 取模实现表格的隔行换色
|
||||
4. 求商取模应用于秒转时间 输入框单位为秒
|
||||
思路：不管输入框获取到的数字是多少，都执行除60取分钟，除600取小时，最后取模为秒数。通过parseInt取整数
|
||||
5. 判断是否为两位数
|
||||
6. 写出运算符优先级
|
||||
7. 计算年龄案例：输入生日输出年龄 并且判断是否能进入网吧
|
||||
8. 运算符的优先级
|
||||
9. 下面代码的执行结果为
|
||||
```
|
||||
var age = 29;
|
||||
var anotherAge = --age + 2;
|
||||
alert(age);
|
||||
alert(anotherAge);
|
||||
|
||||
var time=1
|
||||
var newtime=time++
|
||||
console.log(time,newtime)
|
||||
|
||||
```
|
||||
|
||||
11. 下面代码的执行结果为
|
||||
```
|
||||
<script>
|
||||
var a =1;
|
||||
function test(){
|
||||
alert(a);
|
||||
var a = 2;
|
||||
alert(a);
|
||||
}
|
||||
test();
|
||||
alert(a);
|
||||
</script>
|
||||
|
||||
```
|
||||
12. 下面代码的执行结果为
|
||||
```
|
||||
var x = 7;
|
||||
x += 8;
|
||||
console.log(x)
|
||||
|
||||
|
||||
var y=7
|
||||
y=+8;
|
||||
console.log(y)
|
||||
|
||||
```
|
||||
|
||||
13. 下面代码的执行结果为：
|
||||
```
|
||||
txt1 = "Hello ";
|
||||
txt1 += "Kitty!";
|
||||
console.log(txt1)
|
||||
|
||||
console.log(x = 7 + 8;)
|
||||
console.log(y = "7" + 8;)
|
||||
console.log(z = "Hello" + 7;)
|
||||
|
||||
```
|
||||
|
||||
14. 已知 x=5 分别写出下列语句的打印结果
|
||||
x == 8
|
||||
x == 5
|
||||
x == "5"
|
||||
x === 5
|
||||
x === "5"
|
||||
x != 8
|
||||
x !== 5
|
||||
x !== "5"
|
||||
x !== 8
|
||||
x > 8
|
||||
x < 8
|
||||
x >= 8
|
||||
x <= 8
|
||||
|
||||
|
||||
15. 已知 x=6 y=3 分别写出下列语句的打印结果
|
||||
x < 10 && y > 1
|
||||
x == 5 || y == 5
|
||||
!(x == y)
|
||||
|
||||
|
||||
16. 已知现有fish="23"
|
||||
var cat = (fish < 18) ? "再来一筐锦鲤":"吃饱啦";
|
||||
最后的cat 打印结果为
|
||||
|
||||
17. 写出下面的打印结果
|
||||
2 < 12
|
||||
2 < "12"
|
||||
2 < "John"
|
||||
2 > "John"
|
||||
2 == "John"
|
||||
"2" < "12"
|
||||
"2" > "12"
|
||||
"2" == "12"
|
||||
|
||||
18. 写出下面的打印结果
|
||||
```
|
||||
txt1="What a very ";
|
||||
txt2="nice day";
|
||||
txt3=txt1+txt2;
|
||||
console.log(txt3)
|
||||
var x = 1;
|
||||
x = -x;
|
||||
alert( x );
|
||||
|
||||
var x = 1, y = 3;
|
||||
alert( y - x );
|
||||
|
||||
```
|
||||
|
||||
19. 写出下面的打印结果
|
||||
```
|
||||
alert( 5 % 2 );
|
||||
alert( 8 % 3 );
|
||||
alert( 2 ** 2 );
|
||||
alert( 2 ** 3 );
|
||||
alert( 2 ** 4 );
|
||||
alert( 4 ** (1/2) );
|
||||
alert( 8 ** (1/3) );
|
||||
alert( '1' + 2 );
|
||||
alert( 2 + '1' );
|
||||
alert(2 + 2 + '1' );
|
||||
var x = 1;
|
||||
alert( +x );
|
||||
|
||||
var y = -2;
|
||||
alert( +y );
|
||||
|
||||
// 转化非数字
|
||||
alert( +true );
|
||||
alert( +"" );
|
||||
|
||||
var apples = "2";
|
||||
var oranges = "3";
|
||||
alert( apples + oranges );
|
||||
alert( Number(apples) + Number(oranges) );
|
||||
```
|
||||
20. 运算符优先级
|
||||
21. 下面代码的执行结果为
|
||||
```
|
||||
let a = 1;
|
||||
let b = 2;
|
||||
|
||||
let c = 3 - (a = b + 1);
|
||||
|
||||
alert( a );
|
||||
alert( c );
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
let a, b, c;
|
||||
|
||||
a = b = c = 2 + 2;
|
||||
|
||||
alert( a );
|
||||
alert( b );
|
||||
alert( c );
|
||||
|
||||
let n = 2;
|
||||
n += 5;
|
||||
n *= 2;
|
||||
|
||||
alert( n );
|
||||
|
||||
let n = 2;
|
||||
n *= 3 + 5;
|
||||
alert( n );
|
||||
|
||||
```
|
||||
|
||||
22. 下面代码的打印结果为
|
||||
```
|
||||
alert( true || true ); // true
|
||||
alert( false || true ); // true
|
||||
alert( true || false ); // true
|
||||
alert( false || false ); // false
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
alert( 1 || 0 );
|
||||
|
||||
alert( null || 1 );
|
||||
alert( null || 0 || 1 );
|
||||
alert( undefined || null || 0 )
|
||||
var firstName = "";
|
||||
var lastName = "";
|
||||
var nickName = "SuperCoder";
|
||||
alert( firstName || lastName || nickName || "Anonymous");
|
||||
```
|
||||
23. 下面代码会执行嘛 为什么
|
||||
```
|
||||
true || alert("not printed");
|
||||
false || alert("printed");
|
||||
```
|
||||
|
||||
24. 下面代码的执行结果
|
||||
```
|
||||
alert( 1 && 0 );
|
||||
alert( 1 && 5 );
|
||||
alert( null && 5 );
|
||||
alert( 0 && "no matter what" )
|
||||
alert( 1 && 2 && null && 3 )
|
||||
alert( 1 && 2 && 3 )
|
||||
alert( !!"non-empty string" );
|
||||
alert( !!null );
|
||||
alert( Boolean("non-empty string") );
|
||||
alert( Boolean(null) );
|
||||
alert( null || 2 || undefined );
|
||||
alert( alert(1) || 2 || alert(3) )
|
||||
alert( alert(1) && alert(2) );
|
||||
alert( null || 2 && 3 || 4 );
|
||||
|
||||
```
|
||||
附加
|
||||
游戏开始时，显示12个图像的背面，用鼠标点击其中任意一张，即可显示图像的正面，如果点击了两张，则显示出两张图像的正面。如果点击过的两张图像是相同的图像，则将图像从界面中移除
|
||||
178
zuoye/js/闭包.md
Normal file
178
zuoye/js/闭包.md
Normal file
@@ -0,0 +1,178 @@
|
||||
# 闭包
|
||||
1. 什么是闭包
|
||||
2. 简述闭包的作用
|
||||
3. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
function fn1() {
|
||||
var name = 'iceman';
|
||||
function fn2() {
|
||||
console.log(name);
|
||||
}
|
||||
fn2();
|
||||
}
|
||||
fn1();
|
||||
|
||||
```
|
||||
|
||||
4. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
function fn1() {
|
||||
var name = 'iceman';
|
||||
function fn2() {
|
||||
console.log(name);
|
||||
}
|
||||
return fn2;
|
||||
}
|
||||
var fn3 = fn1();
|
||||
fn3();
|
||||
|
||||
```
|
||||
|
||||
5. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
function fn1() {
|
||||
var name = 'iceman';
|
||||
function fn2() {
|
||||
console.log(name);
|
||||
}
|
||||
fn3(fn2);
|
||||
}
|
||||
function fn3(fn) {
|
||||
fn();
|
||||
}
|
||||
fn1();
|
||||
```
|
||||
6. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
function waitSomeTime(msg, time) {
|
||||
setTimeout(function () {
|
||||
console.log(msg)
|
||||
}, time);
|
||||
}
|
||||
waitSomeTime('hello', 1000);
|
||||
```
|
||||
|
||||
7. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
for (var i = 1; i <= 10; i++) {
|
||||
setTimeout(function () {
|
||||
console.log(i);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
8. 怎么才能在第7题中输出 1-10
|
||||
9. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
function module() {
|
||||
var arr = [];
|
||||
function add(val) {
|
||||
if (typeof val == 'number') {
|
||||
arr.push(val);
|
||||
}
|
||||
}
|
||||
function get(index) {
|
||||
if (index < arr.length) {
|
||||
return arr[index]
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return {
|
||||
add: add,
|
||||
get: get
|
||||
}
|
||||
}
|
||||
var mod1 = module();
|
||||
mod1.add(1);
|
||||
mod1.add(2);
|
||||
mod1.add('xxx');
|
||||
console.log(mod1.get(2));
|
||||
|
||||
```
|
||||
|
||||
10. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
var a = 10
|
||||
function foo(){
|
||||
console.log(a)
|
||||
}
|
||||
|
||||
function sum() {
|
||||
var a = 20
|
||||
foo()
|
||||
}
|
||||
|
||||
sum()
|
||||
```
|
||||
|
||||
11. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
var n = 10
|
||||
function fn(){
|
||||
var n =20
|
||||
function f() {
|
||||
n++;
|
||||
console.log(n)
|
||||
}
|
||||
f()
|
||||
return f
|
||||
}
|
||||
|
||||
var x = fn()
|
||||
x()
|
||||
x()
|
||||
console.log(n)
|
||||
|
||||
```
|
||||
|
||||
12. 简述闭包形成的原因
|
||||
13. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
var a = 0
|
||||
function foo(){
|
||||
var b =14
|
||||
function fo(){
|
||||
console.log(a, b)
|
||||
}
|
||||
fo()
|
||||
}
|
||||
foo()
|
||||
```
|
||||
|
||||
14. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
var n = 10
|
||||
function fn(){
|
||||
var n =20
|
||||
function f() {
|
||||
n++;
|
||||
console.log(n)
|
||||
}
|
||||
return f
|
||||
}
|
||||
|
||||
var x = fn()
|
||||
x()
|
||||
|
||||
```
|
||||
|
||||
15. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
var a = '林一一'
|
||||
function foo(){
|
||||
var a = 'foo'
|
||||
function fo(){
|
||||
console.log(a)
|
||||
}
|
||||
return fo
|
||||
}
|
||||
|
||||
function f(p){
|
||||
var a = 'f'
|
||||
p()
|
||||
}
|
||||
f(foo())
|
||||
|
||||
```
|
||||
215
zuoye/js/预编译作用域.md
Normal file
215
zuoye/js/预编译作用域.md
Normal file
@@ -0,0 +1,215 @@
|
||||
# 预编译作用域练习
|
||||
|
||||
1. 下面代码的执行结果是什么为什么
|
||||
```
|
||||
console.log(x)
|
||||
x=5
|
||||
```
|
||||
|
||||
2. 下面代码的执行结果是什么为什么
|
||||
```
|
||||
console.log(x)
|
||||
var x=5
|
||||
```
|
||||
3. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
var x = 5;
|
||||
console.log(x+""+y)
|
||||
var y=5
|
||||
|
||||
```
|
||||
|
||||
4. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
"use strict";
|
||||
x = 3.14;
|
||||
```
|
||||
|
||||
5. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
"use strict";
|
||||
myFunction();
|
||||
|
||||
function myFunction() {
|
||||
y = 3.14; // 报错 (y 未定义)
|
||||
}
|
||||
```
|
||||
|
||||
6. 为什么要使用严格模式
|
||||
7. 总结严格模式的限制
|
||||
8. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
var x = 0.1;
|
||||
var y = 0.2;
|
||||
var z = x + y
|
||||
console.log(z==0.3)
|
||||
```
|
||||
|
||||
9. js有几种类型的作用域 分别是啥
|
||||
10. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
|
||||
function myFunction() {
|
||||
var carName = "porsche";
|
||||
|
||||
console.log(carName)
|
||||
|
||||
}
|
||||
|
||||
```
|
||||
11. 下面代码的执行结果是什么 为什么
|
||||
```
|
||||
|
||||
function myFunction() {
|
||||
var carName = "porsche";
|
||||
}
|
||||
console.log(carName)
|
||||
|
||||
```
|
||||
|
||||
12. js运行三部曲是
|
||||
|
||||
13. 任何变量如果未经声明就赋值 此变量是
|
||||
|
||||
14. 一切声明的全局变量 全是 的属性
|
||||
|
||||
15. 分析下面代码 的预编译执行过程
|
||||
|
||||
```
|
||||
var x = 1,
|
||||
y = z = 0;
|
||||
|
||||
function add (n) {
|
||||
return n = n + 1;
|
||||
}
|
||||
|
||||
y = add(x);
|
||||
function add (n) {
|
||||
return n = n + 3;
|
||||
}
|
||||
|
||||
z = add(x)
|
||||
```
|
||||
|
||||
|
||||
|
||||
16. 函数预编译的步骤
|
||||
|
||||
17. 全局预编译的步骤
|
||||
|
||||
18. 分析下面代码的预编译执行过程
|
||||
|
||||
```
|
||||
function fn(a){
|
||||
console.log(a);
|
||||
var a = 123;
|
||||
console.log(a);
|
||||
|
||||
function a(){};
|
||||
console.log(a);
|
||||
|
||||
var b = function(){};
|
||||
console.log(b);
|
||||
|
||||
function d(){};
|
||||
}
|
||||
|
||||
//调用函数
|
||||
fn(1);
|
||||
```
|
||||
|
||||
|
||||
|
||||
18. 分析下面代码的预编译执行过程
|
||||
|
||||
```
|
||||
var a = 1;
|
||||
console.log(a);
|
||||
function test(a) {
|
||||
console.log(a);
|
||||
var a = 123;
|
||||
console.log(a);
|
||||
function a() {}
|
||||
console.log(a);
|
||||
var b = function() {}
|
||||
console.log(b);
|
||||
function d() {}
|
||||
}
|
||||
var c = function (){
|
||||
console.log("I at C function");
|
||||
}
|
||||
console.log(c);
|
||||
test(2);
|
||||
```
|
||||
|
||||
|
||||
|
||||
19. 为什么会发生变量提升
|
||||
|
||||
20. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
fun();
|
||||
console.log(b);
|
||||
var b = function fun(){
|
||||
var a = 456;
|
||||
console.log(a);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
21. 下面代码的执行结果是什么 为什么
|
||||
|
||||
```
|
||||
console.log(b);
|
||||
var b = function fun(){
|
||||
var a = 456;
|
||||
console.log(a);
|
||||
}
|
||||
fun();
|
||||
|
||||
```
|
||||
|
||||
22. 什么是执行期上下文
|
||||
|
||||
23. js中有哪几种执行期上下文 分别介绍
|
||||
|
||||
24. 分析下面代码的预编译执行过程
|
||||
|
||||
```
|
||||
global = 100;
|
||||
function fn() {
|
||||
console.log(global);
|
||||
global = 200;
|
||||
console.log(global);
|
||||
var global = 300;
|
||||
}
|
||||
fn();
|
||||
var global;
|
||||
```
|
||||
|
||||
|
||||
|
||||
25. 分析下面代码 预编译执行过程
|
||||
|
||||
```
|
||||
function test() {
|
||||
console.log(b);
|
||||
if (a) {
|
||||
var b = 100;
|
||||
}
|
||||
c = 234;
|
||||
console.log(c);
|
||||
}
|
||||
var a;
|
||||
test();
|
||||
a = 10;
|
||||
console.log(c);
|
||||
|
||||
作者：前端布吉岛
|
||||
链接：https://juejin.cn/post/6933756598678454280
|
||||
来源：掘金
|
||||
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user