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

2018年7月31日11:34:17

第一篇:js语言精粹之对象+函数

以下是便利贴
YDK JS
Vscode 快捷键
原型式的继承——MDN

继续看书继续骗自己能成为大牛 本想一篇写到尾，但知识点放一起太杂 解耦🤔🤔🤔 做成系列好些 方便查看

继承

当函数被创建时 Function构造器产生的函数对象会运行类似this code:

this.protype = {constructor:this}

每个函数都有prototype对象
当var a = new A()

创建一个新对象 继承自构造器函数的原型对象
var that = Object.create(this.prototype)
// 绑定this 到 新对象
var other = this.apply(that,arguments)
//如果返回值不是对象 就返回该新对象  
return (typeOf other === 'object' && other) || that

定义一个构造器

  var Animal = function(name){
      this.name = name
  }
  Animal.prototype.get_name = function(){
      return this.name
  }
  Animal.prototype.say_name = function(){
      return this.saying || ''
  }

构造一个伪类继承Animal 这是通过定义他的constructor函数
并替换它的prototype为一个Animal的实例来实现的:

  var Cat = function(name){
      this.name = name
      this.saying = 'asdf'
  } 

  Cat.prototype = new Animal()
  console.log(Cat.prototype);
  Cat.prototype.get_ = function(){
      return this.say_name()
  }

  var mycat = new Cat('aili')
  console.log(mycat.say_name())
  console.log(mycat.get_name())
  console.log(mycat.get_())

验证继承关系

var a = new A()
a instanceof A

继承方法:

function Student(props) {
    this.name = props.name || 'Unnamed';
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

// 实现原型继承链:
inherits(PrimaryStudent, Student);

// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

JavaScript的原型继承实现方式就是：

1.定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this；
2.借助中间函数F实现原型链继承，最好通过封装的inherits函数完成；

---

以上的这些方法代码量太大需要写大量代码
ES6就很爽啊~
直接上Class 先定义一个类
没有对比就没有伤害来让我们看一下代码

function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

代码可读性不止提高了一个档次
class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}

这里有点像python实现继承的方式 很优雅

原型

差异化继承 : 指明它与所基于的基本的对象的区别

var Animal = {
    name:'Aili',
    get_name:function(){
        return this.name
    },
    says:function(){
        return this.saying||''
    }
}
var myCat = Object.create(Animal)
myCat.name = '王八'
myCat.saying = '你好'
myCat.get_ = function(){
    return this.says()+' '+ this.name
}

函数化

var Animal = function(spec){
    var that = {}
    that.get_name=function(){
        return spec.name
    },
    that.says=function(){
        return spec.saying||''
    }

    return that
}

var mycat = Animal({name:'aili'})

部件 函数最后两页我实在看不下去了 可能是中午没休息的缘故吧 没怎么理解 会用 但是看书就是为了理解啊~~~

数组

数组是一段线性分配的内存 通过整数计算偏移并访问其中的元素
js没有一个好的机制区别数组跟对象

var is_array = function(val){
    return val &&
    typeof val === 'object' &&
    val.constructor === Array
}
// 或者

var is_array = function(val){
    return Object.prototype.toString.apply(val) === '[object Array]'
}

---

P75 2018年7月31日18:11:03 今天就先看到这儿 没效率今天 不爽且躁 所以与其浪费时间去写不如去看看有意思的东西 然后就有了接下来的分享时间

Airbnb JavaScript Style Guide	用更合理的方式写 JavaScript 定义了一整套编码规范
ES6 - 这篇可以 有点像阮一峰大神的	PPT的形式看国外大神脑洞很大
前端学习之路	墙裂推荐 - 有一点点共鸣 但就是没人家吊
国外的前端面试题总结	挑战算法的同学 这本书《编程之法：面试和算法心得》会帮助你

还有很多 之前都在github里关注的但一直没时间去看的
去年一整年都在准备材料出国耽误了一整年 把所有精力全放在雅思跟准备材料上
最后因为一些特殊原因没有去成 技术就没有更新没有学习
所以最近难得有时间可以学习 很开心 所以抓住机会 多学一点然后 读研阶段就会轻松很多~~~ 加油加油

---

2018年8月1日09:55:29

2018年8月1日19:25:51 今天开始写新项目了 小程序在线教育 没时间写算法跟这个blog了 很揪心 打个卡~~~😑😑😑😑😑😑

2018年8月2日14:59:29

给数组的redu方法

Array.prototype.redu = function(f,val){
    var i;
    for (i = 0;  i< this.length; i++) {
        val = f(this[i],val)
    }
    return val
}

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

var mult = function(a,b){
    return a*b
}
var data = [1,2,3,4,5]
data.total = function(){
    return this.redu(add,0)
}
var aaa = data.redu(add,0)
console.log(aaa);
var bbb = data.redu(mult,0)
console.log(bbb);

---

2018年8月13日09:20:12

十天前看的今天又回来继续看书 还是的回归"书本" 继续上次的

指定初始值的数组

Array.dim = (dimession,initial)=>{
    var a = []
    for(var i=0;i<dimession;i++){
        a[i] = initial
    }
    return a
}

var arr = Array.dim(50,'aili')
console.log(arr)

多维数组

Array.matrix = (m,n,initial)=>{
    var i,j,a,mat = []
    for(i=0;i<m;i++){
        a=[]
        for(j=0;j<n;j++){
            a[j] = initial
        }
        mat[i] = a
    }
    return mat
}

var mt = Array.matrix(4,4,'aili')
console.log(mt)

["aili", "aili", "aili", "aili"]
["aili", "aili", "aili", "aili"]
["aili", "aili", "aili", "aili"]
["aili", "aili", "aili", "aili"]

正则表达式

这是我最最最最不想学以及最薄弱的一章 🙄🙄🙄🙄🙄 我选择先放一放

数组的方法

我想把MDN上使用率最高的几个方法的用法总结一下
其实用Vs Code的小伙伴们 直接按住Ctrl点击数组方法就会看到用法和参数 返回值

a.concat(b)	a.join('')	var c = a.pop() 原数组a被修改 c等于最后数组一项
var c = a.push([]) a是合并数组 c是a的长度	var c = a.slice(start,end)	splice重点 var c = a.splice(start,deleitem,additem)
apply()	call()	bind()

pop()实现方式

Array.prototype.pop = function(){
    return this.splice(this.length-1,1)[0]
}

push()实现方式

Array.prototype.push = ()=>{
    this.splice.apply(this,
        [this.length,0].concat(Array.prototype.slice.apply(arguments))
    )
    return this.length
}

Splice的实现方式 高能预警 P96

代码风格

JavaScript包含大量脆弱的、问题缠身的特性，它们会妨碍我们写出优秀的程序
良好的代码风格可以被更好的阅读
使用对象更好的管理代码，使用闭包信息隐藏

毒瘤

全局变量 在小项目里全局变量可以被程序任意部分修改
作用域 js用了块语法但是没有提供块级作用域

检测是否为数组

if(Object.prototype.toString.apply(my_value) === '[Object Array]'){
    //my_value是个数组
}

最后还写了一个Json 解析器 这部分代码就不贴了 github 百度 一搜搜一堆解析代码

完结！ 撒花~~~

接下来就是把代码过一遍 然后开始看JavaScript面向对象编程
之前看到轮子哥的一条回答

• 自学编程的最大障碍就是要马上获得结果。只要你放弃这一点，就可以继续走下去。在新手村转久一点，是正常的。如果题主每天只能付出4个小时的话。认真练习，随缘出山。至于学习路线，无非也就是学两三门语言，背诵API和几个类库，加上数据结构、算法、设计模式、编译原理、测试（《xUnit Test Patterns》英文版，千万不要看翻译本），这一套下来就行了。
  如果你不知道要怎么安排练习打代码的时间的话，一般可以考虑，每看一页书，练习写100行代码。亲测有效。

问题是这样的
自学编程的最大障碍就是要马上获得结果 其实放到看书学习也一样 太急功近利 过于想看到结果 往往学的都不踏实
接下来要看的书就是《js面向对象编程》，因为《js语言精粹》到今天我花了14天已经算很慢的因为周末玩儿 有时候公司项目急等等原因。等价换算的话，前者花费时间大概应该在一个月左右完成 也有可能会很快就完成 我可以下班地铁上厕所排队时间全用来看的话 估计就3-5天时间而已 我该这么热血的看完还是慢慢来呢？
取决于我的心情 哈哈哈
我会把看书过程中比较高能的地方 总结出来 写成blog