美文网首页让前端飞
js语言精粹之对象+函数

js语言精粹之对象+函数

作者: zz77zz | 来源:发表于2018-07-27 20:42 被阅读6次

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语言精粹之对象+函数

    2018年7月27日15:16:58JavaScript语言精粹从上到下顺序执行如果想调整执行顺序 考条件 循环 ...

  • js语言精粹之继承+数组 ²

    2018年7月31日11:34:17 第一篇:js语言精粹之对象+函数 以下是便利贴YDK JSVscode 快捷...

  • 看书有感

    所谓编程,就是将一组需求分解成一组函数与数据结构的技能——js语言精粹 最近在看js语言精粹,觉得这...

  • js 语言精粹 4、函数

    方法调用 函数调用 异常 扩充类型的功能 模块

  • js原型prototype原型链__proto__以及必会的ne

    什么是构造函数 构造函数是典型的面向对象编程语言,js的对象语言体系,是基于构造函数和原型链的构造函数是生成对象实...

  • JS语言精粹

    小小知识点: typeof是一个操作符,并不是function。所以typeof后面不用加括号。参见MDNimag...

  • 2018-05-29JS基础

    js javascript脚本语言解释性基于对象事件驱动函数 js的组成: ECMAScript(语法) ...

  • 基础

    JS 你不知道的 js 上中下 JavaScript 设计 模式 与 开发 实践 JavaScript 语言精粹 ...

  • JS之Function类型理解

    JS之Function类型理解 简述 函数实际上也是对象,每个函数都是Function对象的实例,因此,函数名是一...

  • js 语言精粹 (摘要)

    1.0 js注释 2种 1.1 // 单行注释 1.2 /* */ 多行注释 2.0 标识符 标识符由一个...

网友评论

    本文标题:js语言精粹之对象+函数

    本文链接:https://www.haomeiwen.com/subject/ssrgmftx.html