js--进阶知识点

最新推荐文章于 2023-11-09 16:52:31 发布
dengqulun3433
最新推荐文章于 2023-11-09 16:52:31 发布
阅读量83
点赞数
文章标签： javascript 设计模式 ViewUI
原文链接：http://www.cnblogs.com/lanyueff/p/6794857.html
版权
<!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>