js语言精粹之对象+函数

2018-07-27 本文已影响6人 zz77zz

2018年7月27日15:16:58

对象

检索一个并不存在的成员的属性将返回undefined

JavaScript语言精粹
从上到下顺序执行
如果想调整执行顺序考条件循环 return break 函数调用来改变执顺序
false null undefined '' 0 NaN => flase
除了数字字符串布尔值 undefined null
其余所有东西都是对象

更新 obj['a'] = a
if a 在obj对象里被替换
if a 不在~~~~~ 就添加该属性

原型

var stooge = {
    "first-name":'asdf',
    "last-name":"qwer",
    waihao:"sucker"
}
    // Object.create = function (o){
    //     var F = function(){}
    //     F.prototype = o
    //     return new F()
    // }
var an_stooge = Object.create(stooge);
an_stooge['first-name'] = "aili"
an_stooge['last-name'] = "ablitip"
an_stooge.waihao = '丽丽'

/* 给stooge 加个新属性 */
stooge.age = "20"
console.log(an_stooge);

// 如果 独有属性 hasOwnProperty('number')
console.log(stooge.hasOwnProperty('age '));    //true


/*** 枚举 对象的属性 for in
 */
var age _length;
for(age _length in an_stooge){
    if(typeof an_stooge.age !=='function') document.writeln(age _length+':'+an_stooge.age)
}

减少全局变量污染

// 减少全局变量污染
//创建一个应用的唯一一个全局变量 这是最好的
var app = {};
//然后就可以定义你说定义的一切变量而不会污染全局变量
//避免与其他函数库或者框架发生冲突 也易读
//闭包是另一种有效减少全局污染的方法

app.stooge = {
    "first-name":"app",
    "last-name":"fuck off"
}
app.say = function(){alert("hello i'm an app!")}

函数(Function)

所谓编程，就是将一组需求分解成一组函数与数据结构的技能也就是说

编程能力的高低取决于你理解需求并组织成函数和数据结构的能力

函数对象
每个函数创建时都会有两个属性 contxt上下文和"调用"属性当函数被调用时可以理解为调用了此函数的调用属性

所以在js里都是对象
函数可以保存在变量对象和数组当做参数传给其他函数函数在返回函数

因为函数也是对象所以函数也可以拥有方法

函数字面量

var add = function(a,b){
    return a+b
}

内部函数可以访问自己参数和变量同时可以访问把它嵌套在其中的父函数的参数与变量通过函数字面量创建的函数对象包含一个连接到外部上下文的连接。就称为闭包 js强大表现力的来源

调用
每个函数接收两个附加参数 arguments this
this在 OO 编程中非常重要 this取决于调用的模式
js调用模式有四种方式
1.方法调用 this=>对象.

var app = {
    "first-name":"app",
    "last-name":"fuck off",
    say:function(){alert("hello i'm an app!")}
}

2.函数调用 this=>全局 这是语言设计上一个失误

var say = function(){alert("hello i'm an app!")}

所以我们才会使用

var that = this

3.构造器调用 this=>构造函数的实例.
js是一门基于原型继承的语言 对象可以直接从其他对象继承属性

var Que = function(str){
    this.name = str
}
Que.prototype.get_name = function(){
    return this.name;
}
var newQue = new Que("Aili")
console.log(newQue)

4.apply调用
js是一门函数式的面向对象编程语言 所以函数可以拥有方法

1.
var arr = [2,3]
var sum = add.apply(null,arr)
console.log(sum);
function add(a,b){
    return a+b;
}

2.
var Que = function(str){
    this.name = str
}
Que.prototype.get_name = function(){
    return this.name;
}
var test_que = {
    name:'asdf'
}
var name_a = Que.prototype.get_name.apply(test_que)
console.log(name_a)

test_a 并没有get_name方法也没有继承Que的方法但是可以通过apply调用

拓展函数

Function.prototype.asd = function(name,func){
    if(!this.prototype[name]) this.prototype[name] = func
    return this
}

Number.asd('what_on',function(){
    return Math[this<0?'ceil':'floor'](this)
})
console.log((-10/3).what_on())

// 去掉字符串引号
String.asd('rid',function(){
    return this.replace(/^\s+|\s+$/g,'')
})
console.log(("asdfasdf").rid());

7月30日

09:31:55 今天继续周末是因为私事且没有笔记本耽误了两天很气但可以补加油加油

闭包
作用域的好处是内部函数可以访问定义它们的外部函数的参数和变量
内部函数拥有比外部函数更长的生命周期
调用函数完成初始化返回一个对象字面量

var myObject = (function(){
    var value =0
    return {
        increment:function(inc){
            value +=typeof inc === 'number'?inc:1
        },
        getValue:function(){
            return value
        }
    }
}());

这里的value只对内部函数可用一开始并没有赋值给myobject 是把函数返回的结果赋给它而且最最最重要的
内部函数将继续享有访问内部value的特权
之前写过的Que 可以用闭包再去写一遍

这里的name不是私有属性 可以直接访问到  如果name 是私有属性怎么处理 `闭包`
var Que = function(str){
    this.name = str
}
Que.prototype.get_name = function(){
    return this.name;
}
var test_que = {
    name:'asdf'
}
var name_a = Que.prototype.get_name.apply(test_que)



var Que = function(name){
    return {
        get_name:function(){
            return name
        }
    }
}
var aili = Que("aili")
console.log(aili.get_name());

Que返回了但是内部函数get_name还是可以访问 Que的name属性 get_name可以访问它被创建时所处的上下文环境=>闭包

下面这例子是很多面试中都会提到de 是想给每个处理器一个唯一值 i func只是绑定了 i 本身而是不是 i 的值

var asd = function(nodes){
    var i;
    for(i = 0;i<nodes.length;i++){
        nodes[i].onclick = function(e){
            alert(i)
        }
    }
}

改良后

var asd = function(nodes){
    var i;
    for(i = 0;i<nodes.length;i++){
        node[i].onclick = (function(i){
            return function(e){
                alert(i)
            }
        }())
    }
}

闭包的部分我准备看另一个书 youdontknowjs这本书讲的有点笼统

模块

使用闭包和函数创造模块 提供接口却隐藏状态与实现的函数或者对象 通过函数产生模块可以几乎摒弃全局变量的使用
在函数内部创建的变量每次执行变量就会被求值一次理想的方式是把它放入一个闭包里而且还能提供一个增加更多拓展方法

String.asd('zifu_dentify',function(){
    var entity = {
        quot:'"',
        lt:'<',
        gt:'>'
    }

    return function(){
        return this.replace(/&([^&;]+);/g,
        function(a,b){
            var r = entity[b]
            return typeof r === 'string'? r:a;
        })
    }
}())

console.log('&lt;&quot;&gt;'.zifu_dentify());   //<">

模块模式 函数作用域+闭包创建被绑定对象和私有成员的关联
封装或者构造其他单例对象(单例模式:就是用对象字面量创建的对象)
设计模式还是得看且思考

下面这个例子更好理解创建车牌号(类似于北京的摇号)

var serial_maker = function(){
    var prefix = ''
    var seq = 0
    return {
        set_prefix:function(p){
            prefix = String(p)
        },
        set_seq:function(s){
            seq = s
        },
        gensym:function(){
            var result = prefix+seq
            return result
        }
    }
}

var seqer = serial_maker()
seqer.set_prefix('新A')
seqer.set_seq(Math.floor((Math.random()*100000)))

var unique = seqer.gensym()
console.log(unique);  // 新A14770

神奇的是这里并没有this that 除非调用对应的方法不然没法改变prefix seq

级联
修改状态不用返回任何值得方法类似Jquery

$().move().click().width().html()......

柯里化
函数与参数结合产生出新的函数

继承

人们往往会把一件完整的东西化成无数的形象。就像凹凸镜一般，从正面望去，只见一片模糊。
18:17:35 今天书就看到这里明天继续

js语言精粹之对象+函数

对象

函数(Function)

7月30日

模块

继承

猜你喜欢

热点阅读