2018年7月31日11:34:17
以下是便利贴
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
网友评论