HTML5教程
前端手记
<html>
<head>
<title>learn demo</title>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
<meta http-equiv="cleartype" content="on" />
<style type="text/css">
.father{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.son{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<script>
/**********************************************
* new 实现的原理
*
**/
function Otaku(name, age) {
this.name = name;
this.age = age;
this.habit = "games"
}
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function () {
console.log('I am' + this.name);
}
var person = new Otaku('Kevin', '18');
console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60
person.sayYourName(); // I am Kevin
// 实例person可以：1.访问到 Otaku 构造函数里的属性 2.访问到 Otaku.prototype 中的属性
// 用new Object() 的方式新建了一个对象 obj
// 取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数
// 将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性
// 使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性
// 如果构造函数返回的是一个对象 则返回这个对象，否则返回创建的新对象
function objectFactory() {
var obj = new Object();
Constructor = [].shift.call(arguments);
obj.__proto__ = Constructor.prototype;
var result = Constructor.apply(obj, arguments);
if (result && (typeof (result) == "object" || typeof (result) == "function")) {
return result;
}
return obj;
}
var person_2 = objectFactory(Otaku, 'Ellen', '30')
console.log(person_2.name) // Ellen
console.log(person_2.habit) // Games
console.log(person_2.strength) // 60
person_2.sayYourName(); // I am Kevin
/********************************************************************
*
* ES6中Set和Map方法的使用
**/
// set数组去重
var arr = [1,2,4,1,2,3,5,7];
var set1 = new Set(arr);
// 通过...运算符将set变更为数组形式
var set2 = [...new Set(arr)];
console.log(set1)
console.log(set2)
// 添加元素
set1.add('66');
set2.push(66);
console.log('set1添加元素之后：', set1);
console.log('set2添加元素之后：', set2);
// 删除元素
set1.delete(1);
set2.shift();
console.log('set1删除元素之后：', set1);
console.log('set2删除元素之后：', set2);
// 查找元素 存在true 否则false
console.log(set1.has('8888'));
// map的使用
// 添加元素
var map1 = new Map();
map1.set('name','chen');
map1.set('age',23).set('height',180);
console.log(map1);
// 遍历循环
for(let [key,value] of map1) {
console.log(key,value);
}
// 删除元素
map1.delete('name');
console.log(map1);
// 获取元素
console.log('获取的元素：',map1.get('age'));
</script>
</html>
-
前端大厂面试真题解析与实战攻略12-25
-
如何准备前端面试：新手指南12-25
-
前端面试题详解与实战攻略12-25
-
前端面试真题详解与实战攻略12-25
-
2024前端大厂面试真题详解及备考指南12-25
-
2024前端面试必备指南：从零开始掌握前端面试技巧12-25
-
2024前端面试题详解与实战指南12-25
-
动态面包屑教程：新手入门指南12-21
-
动态主题处理教程：新手必读指南12-21
-
富文本编辑器教程：新手入门指南12-21
-
前端项目部署教程：从零开始的全面指南12-21
-
拖拽表格教程：轻松入门指南12-21
-
Element-Plus教程：新手入门与实战指南12-21
-
TagsView标签栏导航教程：轻松掌握标签栏导航12-21
-
动态表格实战：新手入门教程12-21
