js--进阶知识点

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

    <meta name="format-detection" content="telphone=no, email=no"/>

    <meta name="apple-touch-fullscreen" content="yes"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <title>js严格模式</title>

</head>

<body>

<a href="javascript:void (0);" class="clicka">点我</a>

<a href="javascript:void (0);" class="clicka-btn">点我22</a>

</body>

<script type="text/javascript">

    'use strict';

    var arr=[1,3,4,5,9,12,6];

    function fun1(argument) {

        console.log("严格模式");

        // body...

    }

    fun1();

   /* function fun2(){

        var arguments = [];

        console.log("arguments 严格模式下不能再定义");

    }

    function arguments (){

        console.log("arguments 严格模式下不能再定义,非严格模式可以");

    }*/

//隐式转换

//字符串+其他  得到的仍是字符串

console.log('8' | '1'); 

//使用原始类型替代对象包裹（谨记：对象包装的原始类型和原始类型在比较相等的时候,它们具有不同的表现行为。）

var s = new String('hello');

var s2= new String('hello');

var str=s+'world';

console.log(typeof 'hello'); // string

console.log(typeof s); // object

console.log(s===s2); //false

console.log(s==s2); //false

//str.someProperty = 'some';

//console.log(str.someProperty); // 输出undefined，但是如果 obeject.属性，则正确输出值

//==  在比较两边的值时，会隐性的把它们转换成同一类型的值，然后才会进行比较

//=== 直接比较，不涉及隐性类型转换。

//尽量少用全局变量,尽量使用局部变量

//若不加var则是隐性的定义了全局变量，所以定义变量时一定要加var

// 闭包：熟练掌握闭包

function Container(){

    var arr=[];

    return {

        getItem:function(index){

            return arr[index];

        },

        addItem:function(obj){

            var index=arr.push(obj);

            return index-1; //返回添加元素的第一个元素

        },

        length:function(){

            return arr.length;

        }

    }

}

var c = Container();

console.log("con的长度"+c.length()); // 0

var index1 = c.addItem({name: 'dreamapple'});

console.log(index1); // 0

console.log(c.length()); // 1

console.log(c.getItem(index1)); // Object {name: "dreamapple"}

//变量声明提升（代码块中的变量声明会被隐式地提升到封闭函数的顶部）

console.log(test_bl);

// ***相当于把 var test提升到顶部 赋值部分 test = 1 还是在原来的位置;

var test_bl=9; //若此行注释，则会报错，若不注释，则输出 undefined

//2.6 使用立即调用的函数表达式创建局部作用域

// 新的函数才会产生新的作用域,JavaScript的循环没有新的作用域产生。

var testArr=[4,5,6];

function generateFun(arr){

    var result = [];

    var len=arr.length;

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

       (

        function(j){

            result[j]=function(){

                return arr[j];

            }

        }

        )(i);

    }

    return result; //返回，外面才会访问到result

}

// @2 产生新的函数

var g2 = generateFun(testArr);

console.log(g2[0]()); //4

console.log(g2[1]()); //5

console.log(g2[2]()); //6

//2.6-2 闭包方式2

function genetateFun2(arr){

    var result=[];

    var len=arr.length;

    for (var i = 0; i < len.length; i++) {

        (

            function(i){

              var j=i; //注意此处

              result[i]=function(){

                return arr[j];

              }

            }

            )()

    }

    return result;

}

var g3 = generateFun(testArr);

console.log(g3[0]()); //4

console.log(g3[1]()); //5

console.log(g3[2]()); //6

//2.7 命名的表达式函数

function fun_right_mm(){

    console.log('fun_right_mm');

}

var fun_mm = function fun_mm_name(){

   console.log('fun本身');

   return  fun_right_mm();

}

console.log(fun_mm()); //undefined

//console.log(fun_mm_name());// fun_mm_name is not defined

//尽量用所以尽量使用匿名的函数表达式

//2.8 局部函数调用

//3.1理解函数调用,方法调用及构造函数调用之间的不同

/*方法调用将被查找方法属性的对象作为调用接受者。

构造函数需要通过new运算符调用,并产生一个新的对象作为其接受者。*/

function heelo(){

    console.log('hello函数调用');

}

heelo();

var heeloObj={

    welcome:function(){

        console.log('方法调用'+this.name);

    },

    name:"小红"

}

heeloObj.welcome();

function HeeloContruct(name,age){

    this.name=name;

    this.age=age;

    console.log('构造函数的名字是'+this.name+', and my age is ' + this.age);

}

var heeloCon=new HeeloContruct('小明',26);

//3.2熟练掌握高阶函数(高阶函数是那些将函数作为参数或返回值的函数。)[1,3,4,5,9,12,6]

var arr_gj=arr.sort(function(x,y){

    if(x>y){

        return 1;

    }else{

        return -1;

    }

})

console.log(arr_gj);//排序

var arr_gj2=arr.map(function(x) {

    return x*2+1;

});

console.log(arr_gj2);

var arr_gj_aIndex='a'.charCodeAt(0);//于指定位置的字符的编码

//使用高阶函数

function creatStr(n,cb){

    var str='';

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

        str+=cb(i);

    }

    return str;

}

//创建一个随机字符串

var str_sj_str=creatStr(10,function(){

    return String.fromCharCode(Math.floor(Math.random()*26)+arr_gj_aIndex);

    /*fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串*/

})

  console.log(str_sj_str);

  //创建一个随机数

  var str_sj_num=creatStr(10,function(){

    return Math.floor(Math.random()*26);

  })

  console.log(str_sj_num);

  //3.3 使用call方法自定义接受者来调用方法

  var objCall={

    callWay:function(msg){

        console.log('callWay:'+this.name+'函数参数：'+msg);

    },

    name:"objCall-1-name"

  }

  var objCall2={

    name:"objCall2-name"

  }

  objCall.callWay.call(objCall2,'haha');// 第一个参数是方法的调用者,剩余的参数就是原函数的参数

  // 高阶函数使用call

function compute(arg) {

    var sum = 0;

    for(var i = 0; i < arg.length; i++) {

        sum += arg[i];

    }

    return sum;

}

function highFunc() {

   //console.log(arguments.length); //5

    return compute.call(null, arguments);

}

console.log(highFunc(1, 2, 3, 4, 5)); // 15

/*

使用call方法自定义接受者来调用函数。

使用call方法可以调用在给定的对象中不存在的方法。

使用call方法定义高阶函数允许使用者给回掉函数指定接收者。*/

//3.3  使用apply方法通过不同数量的参数调用函数

/*使用apply方法指定一个可计算的参数数组来调用可变参数的函数。

使用apply方法的第一个参数给可变参数的方法提供一个接收者。*/

function compute2() {   //**使用arguments创建可变参数的函数

    var sum = 0;

    for(var i = 0; i < arguments.length; i++) {

        sum += arguments[i];

    }

    return sum;

}

function wrapper(arr) {

    return compute2.apply(null, arr); // 给compute函数传递多个参数

}

var apply_arr=[1, 2, 3, 4, 5];

console.log(wrapper(apply_arr));

/*call与apply的区别

　　　　apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。

　　　　call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。 

　　　　实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。

*/

//3.8 3.9 待研究

//3.11  不要信赖函数的对象的toString方法。因为不同的引擎下调用toString方法的结果可能不同

var str_tostring=45955444;

console.log(typeof(str_tostring)); //number

console.log(typeof(str_tostring.toString())); //string

var str_tostring_hs=function(x) {

    return x + 1;

}

console.log(str_tostring_hs.toString());/*输出：function (x) {

    return x + 1;

}*/

console.log(typeof (str_tostring_hs)); //function

console.log(typeof (str_tostring_hs.toString()));//string

//4.1 prototype,getPrototypeOf和__proto__之间的不同

/*C.prototype属性是new C()`创建的对象的原型。

Object.getPrototypeOf(obj)是ES5中检索对象原型的标准函数。

obj.__proto__是检索对象原型的非标准方法。

类是由一个构造函数和一个关联的原型组成的一种设计模式。

*/

function protoStudent(name,age){

    this.name=name;

    this.age=age;

}

protoStudent.prototype.sayHello=function(){

    console.log('hello prototype student'+this.name);

}

var s = new protoStudent('dreamapple', 22); //声明函数

s.sayHello(); //调用方法

console.log(protoStudent.prototype === s.__proto__); // true

console.log(protoStudent.prototype === Object.getPrototypeOf(s)); // true 要常用getPrototypeOf()

//4.7 只将实例状态存储在实例对象中

/*

共享可变数据可能会出现问题,因为原型是被所有的实例共享的。

将可变的实例状态存储在实例对象中。*/

function TreePro(value){

    this.value=value;

    //this.children=[];

}

TreePro.prototype={

    children:[],

    addChild:function(value){

        this.children.push(value);

    }

};

var left=new TreePro(1);

left.addChild(2);

left.addChild(3);

console.log(left.children);//[2, 3]

var right= new TreePro(2);

right.addChild(4);

right.addChild(5);

console.log(right.children);//[2, 3, 4, 5]

var top22= new TreePro(7);

top22.addChild(left);

top22.addChild(right);

console.log(left.children);//[2, 3, 4, 5, {value:1}, {value:2}]

console.log(top22.children);//同上

// 可以发现，left right top22改变，则属性都跟着变化，所以,原型为所有实例共享，应该将可变的实例状态存储在实例对象中

function TreePro1(value){

    this.value=value;

    this.children=[];

}

TreePro1.prototype={

    addChild:function(value){

        this.children.push(value);

    }

};

var left1 = new TreePro1(1);

left1.addChild(2);

left1.addChild(3);

console.log(left1.children); // [ 2, 3 ]

var right1 = new TreePro1(4);

right1.addChild(5);

right1.addChild(6);

var top1 = new TreePro1(7);

top1.addChild(left1);

top1.addChild(right1);

console.log(left1.children); // [ 2, 3 ]

console.log(top1.children); // [ { value: 1, children: [ 2, 3 ] },{ value: 4, children: [ 5, 6 ] } ]

//4.9 在子类的构造函数中调用父类的构造函数

//定义一个父类

function parentPro(name,age){

    this.name=name;

    this.age=age;

}

parentPro.prototype.sayHello=function(){

    console.log('my name is'+this.name);

}

//定义我们的子类

function ChildPro(name,age,school){

    parentPro.call(this,name,age);

    this.school=school;

}

//**将子类与父类的原型关联

// Object.create() 一种新的对象创建方式，第一个参数是要继承的原型，如果不是一个子函数，可以传一个null，第二个参数是对象的属性描述符，这个参数是可选的

ChildPro.prototype=Object.create(parentPro.prototype);//使用Object.create()函数来构造子类的原型对象以避免调用父类的构造函数。

ChildPro.prototype.getSchool = function(){

    console.log('my school is'+ this.school);

}

var Childppro=new ChildPro('namehong',12,'guangming')

Childppro.getSchool();//my school isguangming

Childppro.sayHello();//my name isnamehong

//4.12 将原形视为实现的细节 对象是接口,原型是实现。

//提供参数默认值应当采用测试undefined的方式,

// 6.5 使用结构类型(也称为鸭子类型)来设计灵活的对象接口。

// 我们可以使用结构类型

function rectangle1_jiegou(width, length) {

    var _width = width,

        _length = length;

    return {

        getArea: function() {

            return _width * _length;

        }

    }

}

var r2 = rectangle1_jiegou(100, 200);

console.log(r2.getArea()); // 20000

// 6.6 使用ES5提供的Array.isArray方法测试真数组。

// 6.7避免过度的强制转换

function square(x) {

    // 这里会进行强制的类型转换

    return x * x;

}

console.log(square('3')); //

// 一种比较好的方式,我们在函数内部判断参数是否是一个数字

function square1(x){

    if (typeof (x)==='number') {

       return x*x;

    }

  throw new Error('请传递正确的参数类型!');

}

console.log(square1(3));

// 6.3 ***使用extend函数抽象出从选项对象中提取值的逻辑。

//定义一个接受参数的选项对象的函数

function AlertSelect(obj){

    this.level=obj.level;

    this.msg=obj.msg;

}

var ale = new AlertSelect({

    level:0,

    msg:"hello alertselect"

});

console.log(ale);//AlertSelect {level: 0, msg: "hello alertselect"}

// 当然如果一些参数是必选的话,我们把他们单独拿出来,而且参数的选项对象上的属性不是必选的

function AlertSelect1(level,msg,options){

    this.level=level;

    this.msg=msg;

    for (var p in options) {

        this[p]=options[p];//遍历属性并赋值给this

    }

}

var ale1=new AlertSelect1(1,'find error',{

    count:9,

    theme:'default'

})

console.log(ale1);//AlertSelect1 {level: 1, msg: "find error", count: 9, theme: "default"}

//6.3的重点来啦

// 使用extend函数扩展我们的参数对象

function extend(target, source) {

    if(source) {

        for(var p in source) {

            var val = source[p];

            if('undefined' !== typeof val) {

                target[p] = val;

            }

        }

    }

    return target;

}

// 升级原来的构造函数

function Alert2(level, msg, options) {

    var opt = extend({

        level: level,

        msg: msg

    });

    opt = extend(opt, options);

    extend(this, opt);

}

var ale2 = new Alert2(2, 'bug', {

    count: 1,

    theme: 'highlight'

});

console.log(ale2);//Alert2 {level: 2, msg: "bug", count: 1, theme: "highlight"}

//5.1 使用Object的直接实例构造轻量级的字典

// 使用一个对象作为字典来使用

var dict1 = {

    key1: 'value1',

    key2: 'value2',

    key3: 'value3'

};

// 使用Object.getPrototypeOf() 避免使用 __proto__

var dict1P = Object.getPrototypeOf(dict1);

dict1P.say2 = function(){};

var props3 = [];

for(var p in dict1) {

    props3.push(p);

}

console.log(props3); // [ 'key1', 'key2', 'key3', 'say' ]

// 按照顺序的输出要使用数组,不能使用对象

var info1 = [

    {name: 'dream'},

    {'1': '10'},

    {'A': function() {}}

];

for(var i = 0; i < info1.length; i++) {

    for(var kk in info1[i]) {

        if(Object.hasOwnProperty.call(info1[i], kk)) {

            console.log(kk + ' : ' + info1[i][kk]);

        }

    }

}

//并其第5部分

//5.9  在类数组对象上复用通用的数组方法

function fn() {

    console.log(arguments);

    console.log([].slice.call(arguments, 0)); //[1, 2, 3]

    console.log(['array'].concat([].slice.call(arguments)));//[ 'array', 1, 2, 3 ]

}

fn(1, 2, 3);

</script>

</html>

js--进阶知识点的更多相关文章

JS 进阶知识点及常考面试题
将会学习到一些原理相关的知识,不会解释涉及到的知识点的作用及用法,如果大家对于这些内容还不怎么熟悉,推荐先去学习相关的知识点内容再来学习原理知识. 手写 call.apply 及 bind 函数涉及 ...
js进阶 9 js操作表单知识点总结
js进阶 9 js操作表单知识点总结一.总结一句话总结:熟记较常用的知识点,对于一些不太常用的知识点可以在使用的时候查阅相关资料,在使用和练习中去记忆. 1.表单中学到的元素的两个对象集合石什么? ...
2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从 ...
js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言
js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言一.总结一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...
js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
js进阶 10-7 简单的伪类选择器可以干什么
js进阶 10-7 简单的伪类选择器可以干什么一.总结一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...
js进阶 10-5 jquery中的层级选择器有哪些
js进阶 10-5 jquery中的层级选择器有哪些一.总结一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...
js进阶 10-1 JQuery是什么
js进阶 10-1 JQuery是什么一.总结一句话总结: 1.两种引用jquery的方法? 可以在线jquery和本地jquery两种 2.jquery主要好处? 浏览器兼容问题二.js进阶 ...
js进阶 9-14 js如何实现下拉列表多选移除
js进阶 9-14 js如何实现下拉列表多选移除一.总结一句话总结: 1.js如何实现下拉列表多选移除? 把这个下拉列表中的option移除,然后加到另外一个下拉列表(文字)中去.remove方法 ...

随机推荐

jQuery scrollLeft()与scrollTop() 源码解读
这里的实现也很容易懂,通过jQuery的静态方法each给jQuery的原型添加scrollLeft和scrollTop方法. 这里在取值时它把window和普通的element做了区分如果是win ...
PHP 函数的参数
函数的参数通过参数列表可以传递信息到函数,即以逗号作为分隔符的表达式列表. PHP 支持按值传递参数(默认),通过引用传递参数以及默认参数.也支持可变数量的参数:更多信息请参照可变长度参数列表和涉及 ...
ASP.NET Cookie的登录验证
做用户登录,我一直用form验证的方式.有时候,为了节省时间,用户希望用户名输入框能够记住用户名,省得下次重新输入.这个时候光用form验证是不行的,因为form验证的话,用户一退出系统就失效了,所以 ...
JS基础1 — 代码要注意的一些问题
1.在一对 <script></script> 标签中,有错的js代码,那么该错误代码后面的代码不会执行. 例子:<script> alert("He ...
linux_base-f10-10_7 linuxulator is not (kld)loaded
# cd linux_base-f10/# make install clean===> linux_base-f10-10_7 linuxulator is not (kld)loaded. ...
sublime快捷键mark
Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选择需要合并的多行时)Ctrl+L 选择整行(按住-继续选择下 ...
MySQL 导出一句话
听说是很老的东西了,学习的时候发现还是很好用的,故学习转载过来,留备学习. mysql 导出一句话方法1:网上流行的方法流程:(1)建表--->(2)插入数据--->(3)select ...
js数组去重方法包括Es6（方法有很多，但是需要考虑兼容性和数据类型场景）
1.Es6提供的方法 <script type="text/javascript"> //ES6里新添加了两个方法,set(set是一种新的数据结构,它可以接收一个数组 ...
elasticsearch更新操作问题
elasticsearch在更新的时候,是通过id进行管理的,我们在前台传入id操作,id如果与elasticsearch相同,则覆盖,否则新增一条记录.且elasticsearch中的插入一条记录和 ...
推荐一个yaml文件转json文件的在线工具
YAML的全称是YAML Ain't Markup Language,是一种简洁的非标记语言,以数据为中心,使用空白,缩进,和分行组织数据,从而使得表示更加简洁易读. YAML如今广泛应用于微服务开发 ...

js--进阶知识点

js--进阶知识点的更多相关文章

随机推荐

热门专题