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>


这篇关于前端手记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!