读书笔记-JavaScript面向对象编程(一)

前前后后大概花了两周的时间,终于把这本书大致看完了,对之前javascript高级程序设计中模糊不清的概念,有了一些新的看法和角度,整体上来说,本书还是一本比较适合有一定前端基础的朋友们阅读。参考http://pan.baidu.com/s/1eSDSTVW 密码: 75jr

第1章 引言

1.1 回顾历史

1.2 变革之风

1.3 分析现状

1.4 展望未来

1.5 面向对象的程序设计

  1.5.1 对象(属性和方法的集合)

  1.5.2 类 (相似对象的共同特征,如麻雀、老鹰都是鸟类)

  1.5.3 封装 (将属性和方法集合起来,也有封闭作用域的概念,如封装一个播放器对象)

  1.5.4 聚合 (将几个对象合并成一个对象)

  1.5.5 继承 (一个实例对象继承父级对象的一些属性和方法)

  1.5.6 多态 (一个对象调用其他对象的方法,call和apply)

1.6 OPP概述

1.7 训练环境设置

1.8 使用Firebug控制台

1.9 本章小结

第2章 基本数据类型、数组、循环及条件表达式

2.1 变量 (命名规则、声明前置、作用域)

2.2 操作符 (+、-、*、/、%、++、--、=、+=、-=、*=、/=、%=)

2.3 基本数据类型 (数字、字符串、布尔值、undefined、null)

  2.3.1 查看类型操作符 typeof

  2.3.2 数字(整数或浮点数,typeof返回number,八进制0开头,十六进制0x开头,指数表示法1e+1=10,2e-3=0.002)

       (Infinity无穷大不可运算,typeof NaN也是number,NaN具有传染性即带入运算结果为NaN)

  2.3.3 字符串(单双引号之间的任何值,typeof返回string,*1或parseInt转换为数字)

        (\转义字符,\n换行符,\r回车符,\t制表符,\u后面为Unicode码)

  2.3.4 布尔值(typeof返回boolean,逻辑运算符!、&&、||会默认转换,6个falsy["",null,undefined,0,NaN,false])

        (比较运算符==、===、!=、!==、>、>=、<、<=,NaN不等于任何包括自己)

  2.3.5 undefined和null(不存在或未赋值的变量时得到undefined,null需要手动赋值,数字转换:undefined为NaN,null为0)

2.4 基本数据类型综述

2.5 数组(typeof返回object) 

2.6 条件与循环 

  2.6.1 if条件表达式 (if(a)如果a未定义会产生警告,可以用if(typeof a !=="undefined"),用三元运算符代替?:)

      (switch语句,case比对为true执行冒号后语句, break跳出switch[可选],default可选)

  2.6.2 循环(while、do while、for、for in不可代替,遍历数组或对象【此处可深入跟forEach和each比较】)

2.7 注释(单行//,多行/**/)

2.8 本章小结

2.9 练习题

1、如果我们再控制台中执行下列语句,结果分别是什么?为什么?

var a; typeof a  //undefined
var s='1s';s++   //NaN,自增自减必须针对Number类型(区别s+=1,值为'1s1')
!!'false'        //true,'false'转换为true,两次取反还为true
!!undefined      //false
typeof -Infinity //number
10 % '0'         //NaN
undefined==null  //true,默认转换为false==false为true
false===''       //false
typeof '2E+2'    //string
a=3e+3;a++       //3000,a++本行取值为a,下一行为a+1

2、执行下面的语句后,v的值会是什么?

>>> var v = v || 10;

如果将v分别设置为100、0、null,或者卸载它(即delete v),结果又将是什么?

var v=v||10;     //v=10,undefined默认转换为false 
v=100;v=v||10;   //v=100
v=0;v=v||10;     //v=10,0默认转换为false
v=null;v=v||10;  //v=10,null默认转换为false
delete v;v=v||10;//v=10,delete后为undefined(同上第一行)

3、编写一个打印乘法口诀表的脚本程序。(提示:使用嵌套循环来实现。)

var res="\n";
for(var i=1;i<=9;i++){
    for(var j=1;j<=i;j++){res+=i+"*"+j+"="+i*j+" "}
    res+="\n"
}
console.log(res)
/*
1*1=1 
2*1=2 2*2=4 
3*1=3 3*2=6 3*3=9 
4*1=4 4*2=8 4*3=12 4*4=16 
5*1=5 5*2=10 5*3=15 5*4=20 5*5=25 
6*1=6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36 
7*1=7 7*2=14 7*3=21 7*4=28 7*5=35 7*6=42 7*7=49 
8*1=8 8*2=16 8*3=24 8*4=32 8*5=40 8*6=48 8*7=56 8*8=64 
9*1=9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81
*/

第三章:函数

3.1 什么是函数 (一组代码)

  3.1.1 调用函数

  3.1.2 参数(已定义形参,少传实参默认undefined,多传被忽略,也可使用内建的arguments)

3.2 预定义函数

  3.2.1 parseInt()(转换为整数,第二个参数可选:设置进制类型,一般默认十进制,0x开头默认16,0开头默认8)

  3.2.2 parseFloat()(转换为十进制浮点数,可接受指数形式"123e-2"为1.23)

  3.2.3 isNaN()(确定是否为数字,因为NaN===NaN为false不可用)

  3.2.4 isFinite()(检测是无穷大Infinity返回false否则为true,isFinite(NaN)返回false)

  3.2.5 URI的编码与反编码(encodeURI()、encodeURICompent()和反转函数decodeURI()、decodeURICompent())

  3.2.6 eval()(将字符串当做JS脚本来执行)

  3.2.7 alert()(不解释)

3.3 变量的作用域(注意:没有块级作用域;不用var声明默认为全局变量;声明前置)

3.4 函数也是数据(typeof function(){}返回function,函数是赋值给变量的一种数据,只是含代码和可调用)

  3.4.1 匿名函数(可以作为参数传递个其他函数[回调函数],用来执行一次性任务[自调函数])

  3.4.2 回调函数(可以传递匿名函数减少全局变量,可以将一个函数调用委托给另一个函数,提升性能)

  3.4.3 回调示例(如下修改后只需要一次函数调用就够了,使用匿名函数代替addOne)

//两个函数共同处理时的数据传递
function multiplyBytwo(a,b,c){
    var i,ar=[];
    for(i=0;i<3;i++){ar[i]=arguments[i]*2;}
    return ar;
}
function addOne(a){return a+1;}
var myarr=multiplyBytwo(10,20,30)
for(var i=0;i<3;i++){myarr[i]=addOne(myarr[i])}
myarr //[21,41,61]
//回调函数方式
function multiplyBytwo(a,b,c,callback){
    var i,ar=[];
    for(i=0;i<3;i++){ar[i]=callback(arguments[i]*2);}
    return ar;
}
var myarr=multiplyBytwo(10,20,30,function(a){return a+1;})
myarr //[21,41,61]

  3.4.4 自调函数(封闭作用域,不产生全局变量,缺点不可重复调用)

  3.4.5 内部私有函数(函数内部的函数:减少命名冲突;私有化)

  3.4.6 返回函数的函数(return返回一个函数)

  3.4.7 能重写自己的函数(即为函数重新赋值)

3.5 闭包

  3.5.1 作用域链(没有块级作用域,只有函数作用域,函数内可访问自身和父级作用域中变量,函数外不可访问函数内私有变量)

  3.5.2 词法作用域(每个函数定义时创建自己的环境即作用域)

function f1(){var a=1;f2()}
function f2(){return a}
f1()//a is not defind 变量a是f1函数的私有变量,f2被定义时(不是执行)为全局函数,它无法在全局作用域中找到私有变量a

  3.5.3 利用闭包突破作用域链(在函数内部传递或返回给全局空间)

function f(){var a=1; return function(){ return a}}
var n=f();
n(); //1,内部匿名函数可访问私有变量a,返回这个匿名函数,将它赋值给n,然后执行n,即可访问私有变量a
var n;
function f(){var a=1;n=function(){ return a}}
f();n()//1,定义一个全局变量n,执行f()后在内部定义了n可以访问内部变量,同时没有用var它是属于全局
function f(a){var n=function(){ return a};a++;return n}
var m=f(123)
m()//124返回++更新后的值,n前面是赋值而调用执行是return的时候,故函数绑定的是作用域本身,不是变量或变量当前返回值
//循环中的闭包
var arr=[];
for(var i=0;i<3;i++){
    arr[i]=(function(x){return x})(i)
}
arr[0]//0利用自调函数将i赋值给局部变量x,来避免调用作用域本身(即i更新后的值3)

  3.5.4 Getter与Setter(两个额外函数用来访问和设置不想暴露给外部的私有变量)

  3.5.5 迭代器

function setup(arr){
    var i=0;
    return function(){ return arr[i++]}
}
var next=setup(['a','b','c']);
next()//a
next()//b
next()//c

3.6 本章小结

3.7 练习题

1、编写一个将十六进制值转换为颜色的函数,以蓝色为例#0000FF应被表示成‘rgb(0,0,255)’,然后将函数命名为getRGB()

function getRGB(color){
    var rgb=[parseInt('0x'+color.slice(1,3)),parseInt('0x'+color.slice(3,5)),parseInt('0x'+color.slice(5,7))];
    return 'rgb('+rgb[0]+","+rgb[1]+","+rgb[2]+")";
}
getRGB("#00ff00")//"rgb(0,255,0)"

2、如果在控制台中执行以下各行,分别会输出什么内容?

parseInt(1e1)//10
parseInt('1e1')//1,遇到不明字符截止
parseFloat('1e1')//10,可接受指数类型
isFinite(0/10)//true
isFinite(20/0)//false
isNaN(parseInt(NaN))//true

 3、下面代码中,alert弹出的内容是什么?(2)

var a=1;
function f(){
  var a=2;
  function n(){alert(a)}
  n()      
}
f()//2

4、以下所有示例都会弹出“Boo!”警告框,请解释其中的原因?

var f=alert;
eval('f("Boo!")')//将内置alert赋值给f,再用eval编译,等同直接alert
var e,f=alert;
eval('e=f')('Boo!')//e=f=alert
(function(){
    function(){return alert}
})()('Boo!')//自调函数返回alert

第4章 对象

4.1 从数组到对象(数组等于数字键值的对象,对象的键值可以不加引号,除了js保留字数字开头或者特殊字符外)

  4.1.1 元素、属性、方法(数组元素、对象属性,若属性为函数则称为方法)

  4.1.2 哈希表、关联型数组(即对象)

  4.1.3 访问对象属性(点语法a.b和中括号语法a[b],中括号语法适用于属性名为变量)

  4.1.4 调用对象的方法(同属性和调用函数相同,a.b()或a[b]())

  4.1.5 修改属性与方法

  4.1.6 使用this值(对象方法内部,可用this代替这个对象,即当前对象的意思)

  4.1.7 构造器函数(使用new操作符,可以在创建同时接受一些参数)

  4.1.8 全局对象(全局属性和函数,,默认为浏览器(window)宿主对象的属性和方法)

  4.1.9 构造器属性(字面量法创建的对象,constructor默认为Object())

function Hero(name){this.name=name;}
var h2=new Hero("aaa")
var h3=new h2.constructor("bbb")
h3.name //bbb,h2.constructor===Hero

  4.1.10 instranceof操作符(返回一个对象是不是摸个指定构造器所创建的,如a={},a instanceof Object//true)

  4.1.11 返回对象的函数(工厂模式)

function factory(name){
  return { name:name}  
}
var o=factory('one')
o.name//"one"
o.constructor//Object()
function C(){this.a=1}
var c=new C()
c.a//1
function C2(){this.a=1;return {b:2}}
var c2=new C2()
c2.a//undefined,这里构造器返回的不再是包含a的this对象
c2.b//2,而是return返回的对象(仅在构造函数return返回对象时发生,若返回非对象类型,仍然返回this对象)

  4.1.12 传递对象(复制对象传递的是引用,修改将影响它所引用的原对象 )

  4.1.13 对象比较(两个对象引用相同对象时为true,如果不同对象,即使方法属性相同也为false)

  4.1.14 Firebug控制台中的对象

4.2 内建对象

  4.2.1 Object(所有对象的父级对象,空对象默认含有constructor属性,toString和Valueof方法)

  4.2.2 Array(数组也是对象,所以继承了Object的属性和方法,数组长度length可设置,超出则创建undefined,小于则多余被移除)

        (数组的特有方法:push添加、pop减少、sort排序、join字符串连接、slice截取、splice替换)

  4.2.3 Function(函数也是对象,默认属性constructor和prototype,特有方法call和apply,arguments类数组它的callee返回自身,用于匿名递归调用)

  4.2.4 Boolean

  4.2.5 Number(特有方法:toFixed、toPrecision、toExponential)

  4.2.6 String(方法:toUpperCase、toLowerCase、charAt、indexOf、lastIndexOf、slice和substring、split、concat)

  4.2.7 Math(属性为常量不可修改,方法random、floor、ceil、max、min、pow、sqrt、sin、cos、atan。。)

  4.2.8 Date

  4.2.9 RegExp(两种匹配内容的方法test、exec,以正则表达式为参数的字符串方法match、search、replace、split)

  4.2.10 Error(使用try、catch及finally处理错误,throw new RangeEror抛出自建错误对象)

4.3 本章小结

4.4 练习题

1、请看下列代码,请问这里的的this指向的是全局对象还是对象o?

function F(){
  function C(){return this;}//函数执行默认为window调用,this指window全局对象
  return C();//C()执行并返回了window
}
var o=new F();//当构造函数返回对象时,新建对象等于返回的对象,所以o===window

2、下面代码执行的结果是什么?

function C(){this.a=1;return false;}
console.log(typeof new C()) //object,new C()等于创建了一个对象

3、下面这段代码的执行结果又将是什么?

c=[1,2,[1,2]];
c.sort();//[1,[1,2],2]
c.join('--');//'1--1,2--2'
console.log(c);//[1,[1,2],2]

4、在String()构造器不存在的情况下自定义一个MyString()的构造器函数。并要让创建的对象通过以下测试:

var MyString=function(str){this.str=str;this.init()}
MyString.prototype={
  constructor:MyString,
  init:function(){
      var that=this;
      for(var i in that.str){that[i]=that.str[i]}
      that.length=+i+1;
  },
  toString:function(){return this.str},
  valueOf:function(){return this.str},
  charAt:function(n){return isNaN(Number(n))?this[0]:this[Number(n)]},
  concat:function(s){ return this.str+s},
  slice:function(a,b){
      var s='';
      b=b>0?b:this.length+b;
      for(var i=a;i<b;i++){s+=this[i]}
      return s;
  },
  split:function(s){
      var str='',arr=[];
      for(var i=0;i<this.length;i++){if(this[i]==s){arr.push(str);str=''}else{str+=this[i];}}
      arr.push(str)
      return arr;
  }
}
var s=new MyString('hello')
s.length //5
s[0] //h
s.toString() //hello
s.valueOf() //hello
s.charAt(1) //e
s.charAt('2') //l
s.charAt('e') //h
s.concat(' world!') //hello world!
s.slice(1,3) //el
s.slice(0,-1) //hell
s.split('e') //["h","llo"]
s.split('l') //["he","","o"]

5、更新上面的MyString()构造器,为其添加一个reverse()方法

MyString.prototype.reverse=function(){
    var str='';
    for(var i=this.length-1;i>=0;i--){str+=this[i]}
    return str;
}

6、在Array()构造器以及相关数组的文本标示法都不存在的情况下,自定义一个类似的MyArray()构造器,并令其通过以下测试; 

var MyArray=function(arr){this.arg=arguments;this.init()}
MyArray.prototype={
  constructor:MyArray,
  init:function(){
      var that=this;
      for(var i in that.arg){that[i]=that.arg[i];}
      that.length=+i+1;
  },
  toString:function(){
    var that=this,str='';
    for(var i=0;i<that.length;i++){str+=(that[i]+[i==(that.length-1)?'':','])}
      return str;
  },
  push:function(s){this[this.length]=s;this.length++;return this.length;},
  pop:function(){ this.a=[];this.length--;delete this[this.length]; for(var i=0; i<this.length;i++){this.a[i]=this[i]};return this.a},
  join:function(b){var that=this,str='';
    for(var i=0;i<that.length;i++){str+=(that[i]+[i==(that.length-1)?'':b])}
      return str;}
}
var a=new MyArray(1,2,3,'test')
a.toString() //1,2,3,test
a.length //4
a[a.length-1] //test
a.push('boo') //5
a.toString() //1,2,3,test,boo
a.pop() //[1,2,3,test]
a.join(',') //1,2,3,test
a.join(' isn\'t ') //1 isn't 2 isn't 3 isn't test

7、在Math对象不存在的情况下,创建一个类似的MyMath对象,并为其添加以下方法:

  ◆ MyMath.rand(min,max,inclusive)--随机返回min到max区间中的一个数,并且在inclusive为true时为闭区间(默认)

  ◆ MyMath.min(array)返回目标数组中的最小值

  ◆ MyMath.max(array)返回目标数组中的最大值

var MyMath={
  rand:function(min,max,inc){
    var i=true;if(!arguments[2]){i=false;}
    function r(n){return Math.floor((new Date().getTime()*9301+49297)%233280/233280*n);}
    if(i){return r(max-min+1)+min;}else{return r(max-min)+min;}
  },
  sort:function(arr,f){
    var l=arr.length,temp=arr[0];
    if(l>=2){for(var i=1;i<l;i++){temp=(temp-arr[i])*f>0?temp:arr[i];}}
    return temp;
  },
  min:function(array){return this.sort(array,-1)},
  max:function(array){return this.sort(array,1)}
}
console.log(MyMath.rand(5,10,true))//随机5-10
console.log(MyMath.min([131,53,21]))//21
console.log(MyMath.max([88,44,99]))//99

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

c++ const放置的位置

标准中int const a 与 const int a 是完全等价的。正因为如此,会有很多各种不同的风格,同样的还有“*是跟类型还是变量?”,比如char* ...

561
来自专栏北京马哥教育

Python编程中的反模式

云豆贴心提醒,本文阅读时间7分钟 这篇文章收集了我在Python新手开发者写的代码中所见到的不规范但偶尔又很微妙的问题。 本文的目的是为了帮助那些新手开发者渡...

3417
来自专栏绿巨人专栏

不变(Invariant), 协变(Covarinat), 逆变(Contravariant) : 一个程序猿进化的故事

3775
来自专栏Java成长之路

函数重构之道

以下代码做了好几件事情。它创建缓冲区、获取页面、搜索继承下来的页面、渲染路径、添加神秘的字符串、生产HTML等等。

852
来自专栏北京马哥教育

Python编程中的反模式

这篇文章收集了我在Python新手开发者写的代码中所见到的不规范但偶尔又很微妙的问题。

652
来自专栏对角另一面

lodash源码分析之compact中的遍历

本文为读 lodash 源码的第三篇,后续文章会更新到这个仓库中,欢迎 star:pocket-lodash

1976
来自专栏老马寒门IT

前端面试题:JS中的let和var的区别

最近很多前端的朋友去面试被问到let和var的区别,其实阮一峰老师的ES6中已经很详细介绍了let的用法和var的区别。我简单总结一下,以便各位以后面试中使用。...

32810
来自专栏小狼的世界

Ruby学习笔记

Ruby语言中,以对象为基本单位,可以说所有的元素都是对象。按照之前对于面向对象程序的理解,对象是指包含了特定属性和方法集合的一组程序。对象由类来定义,具体的表...

592
来自专栏java学习

Java每日一练(2017/6/25)

Java基础 | 数据库 | Android | 学习视频 | 学习资料下载 最新通知 ●回复"每日一练"获取以前的题目! ●【新】Ajax知识点视频更新了!(...

31610
来自专栏彭湖湾的编程世界

【javascript】详解变量,值,类型和宿主对象

JS数据类型 JS类型分类 ? 讲到类型, 首先要说的当然是JS的类型分类, 对于这一点,《javascript高级语言程序设计》和《你不知道的javasvri...

1816

扫码关注云+社区