前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版

JavaScript启示录阅读笔录

首页2017-10-24 10:30:13Front-End
JavaScript读书笔记

# 第一章 JavaScript对象

# 1.1 创建对象


//创建copy对象
var copy = new Object();

//为对象的各种属性赋值
copy.living = true;
copy.age = 33;
copy.gender = 'male';


// logs Object {living = true, age = 33, gender = 'male'}
console.log(cody); 
@前端进阶之旅: 代码已经复制到剪贴板
  • 最重要的是要记住:对象只是属性的容器,每个属性都有一个名称和一个值

# 1.2 JavaScript构造函数构建并返回对象实例


  • 构造函数的作用是创建多个共享特定特性和行为的对象。
  • 构造函数主要是用于生成对象的模具,这些对象具有默认属性和属性方法
//Pserson是一个构造函数 使用new关键字进行实例化
  var Person = function(living,age,gender){
        //this表示即将创建的新对象
        
        this.living = living;
        this.age = age;
        this.gender = gender;
        this.getGender = function(){
            return this.gender;
        }
        
    //实例化Person对象 
    var copy = new Person(true,22,'male');
    
    console.log(copy.constructor);//输入Person函数
  }

@前端进阶之旅: 代码已经复制到剪贴板

# 1.3 JavaScript原生内置对象构造函数


  • JavaScript包含九个原生对象构造函数,JavaScript使用这些对象来构建JavaScript语言

  • Number()

  • String()

  • Boolean()

  • Object()

  • Array()

  • Function()

  • Date()

  • RegExp()

  • Error()

  • 使用new关键字实例化每个原生构造函数

var number = new Number(22);
var string = new String("male");
var boolean = new Boolean(false);
var obj = new Object();
var arr = new Array("foo","dfa");
var func = new Function("x","y","return x*y");
var date = new Date();
var reg = new RegExp('\bt[a-z]+\b');
var error = new Error("Crap");
@前端进阶之旅: 代码已经复制到剪贴板

# 第二章 对象与属性


# 2.1 封装复杂对象


  • Object()、Array()、 Function()对象可以包含其他复杂对象
//使用对象封装,创建对象链
var obj1 = {
    obj1_1: {
        obj1_1_1: {}
    },
     obj1_2: {
        obj1_2_1: {}
    },
};

@前端进阶之旅: 代码已经复制到剪贴板
//使用数组封装 创建多维数组链

var myArr = [ [ [] ] ];
@前端进阶之旅: 代码已经复制到剪贴板
//使用function封装

var myFunc = function(){

    va myfunc = function(){
        var myfunc = function(){
            
        }
    }
}
@前端进阶之旅: 代码已经复制到剪贴板

# 2.2 用点表示法或中括号表示法获取/设置/更新对象属性


// creating cody Object() object
var cody = new Object();

// setting properties
cody['living'] = true;
cody['age'] = 33; 
cody['gender'] = 'male';
cody['getGender'] = function() {return cody.gender;};

// getting properties
console.log(
    cody['living'], 
    cody['age'], 
    cody['gender'], 
    cody['getGender']() // just slap the function invocation on the end!
); // logs 'true 33 male male'

// updating properties, very similar to setting
cody['living'] = false;
cody['age'] = 99; 
cody['gender'] = 'female';
cody['getGender'] = function() {return 'Gender = ' + cody.gender;};
@前端进阶之旅: 代码已经复制到剪贴板

# 2.3 删除对象属性


var foo = {bar:"bar"};
delete foo.bar;

console.log("bar" in foo);
@前端进阶之旅: 代码已经复制到剪贴板

# 2.4 使用hasOwnProperty验证对象属性是否来自原型链


var obj = {foo:"value"};
console.log(obj.hasOwnProperty("foo"));//true
@前端进阶之旅: 代码已经复制到剪贴板

# 2.5 使用in操作符来检查一个对象是否包含给定属性


var myObject = {foo: 'value'};
console.log('foo' in myObject); // logs true
@前端进阶之旅: 代码已经复制到剪贴板

# 2.6 使用for in循环枚举对象属性


var copy = {
    age:23,
    gender:'male'
};

for(var key in copy){//key表示每个属性的名称
    if(copy.hasOwnproperty(key)){ //避免来自原型链的属性
        console.log(key);
    }
}
@前端进阶之旅: 代码已经复制到剪贴板

# 第三章 Object

# 3.1 Object对象概要


var copy = {};
for (key in copy){
    if(copy.hasOwnproperty(key)){
        console.log(key);
    }
}
@前端进阶之旅: 代码已经复制到剪贴板

# 3.2 Object对象实例属性和方法


  • 实例属性
    • constructor
  • 实例方法
    • hasOwnProperty()
    • isPrototypeOf()
    • propertyIsEnumerable()
    • toLocaleString()
    • toString()
    • valueOf()

# 第四章 Function

# 4.1 Function对象属性和方法


  • 属性 prototype

# 4.2 function对象实例属性和方法


  • 实例属性

    • arguments
    • constructor
    • length
  • 实例方法

    • apply()
    • call()
    • toString()

# 4.3 this和arguments适用于所有函数


  • 在所有函数的作用域、函数体内,this和arguments值都是可用的

  • arguments对象是一种类数组对象,它包含所有传递给函数的参数

var add = function(){

    return arguments[0] + arguments[1];
};

console.log(add(4,4));//8

@前端进阶之旅: 代码已经复制到剪贴板
var myObject1 = {
    name: 'myObject1',
    myMethod: function(){console.log(this.name);}
};

myObject1.myMethod(); // logs 'myObject1'

var myObject2 = function(){console.log(this);}; 

myObject2(); // logs Window
@前端进阶之旅: 代码已经复制到剪贴板

# 4.4 函数实例的length属性和arguments.length


  • argument对象有一个独特的length属性,它给出的是在调用时发送给函数的参数数量
var myObject1 = {
    name: 'myObject1',
    myMethod: function(){console.log(this.name);}
};

myObject1.myMethod(); // logs 'myObject1'

var myObject2 = function(){console.log(this);}; 

myObject2(); // logs Window

@前端进阶之旅: 代码已经复制到剪贴板
  • 通过Function()实例的length属性,实际上可以获得函数所需要的参数总数量
var myFunction = function(z, s, d, e, r, m, q) {
    return myFunction.length;
};

console.log(myFunction()); //logs 7

@前端进阶之旅: 代码已经复制到剪贴板

# 4.5 定义函数语句、表达式、构造函数


//函数构造函数
var addConstructor = new Function("x","y","return x + y");

//函数语句
function  addStatement(x,y){
    return x + y;
}

//函数表达式
var addExp = function(){
    return x + y;
}
@前端进阶之旅: 代码已经复制到剪贴板

# 4.6 调用函数(函数、方法、构造函数、call、apply)


  • 使用四种不同场景或模式调用函数
    • 作为函数
    • 作为方法
    • 作为构造函数
    • 使用call、apply
fe
  • 第一章 JavaScript对象
    • 1.1 创建对象
    • 1.2 JavaScript构造函数构建并返回对象实例
    • 1.3 JavaScript原生内置对象构造函数
  • 第二章 对象与属性
    • 2.1 封装复杂对象
    • 2.2 用点表示法或中括号表示法获取/设置/更新对象属性
    • 2.3 删除对象属性
    • 2.4 使用hasOwnProperty验证对象属性是否来自原型链
    • 2.5 使用in操作符来检查一个对象是否包含给定属性
    • 2.6 使用for in循环枚举对象属性
  • 第三章 Object
    • 3.1 Object对象概要
    • 3.2 Object对象实例属性和方法
  • 第四章 Function
    • 4.1 Function对象属性和方法
    • 4.2 function对象实例属性和方法
    • 4.3 this和arguments适用于所有函数
    • 4.4 函数实例的length属性和arguments.length
    • 4.5 定义函数语句、表达式、构造函数
    • 4.6 调用函数(函数、方法、构造函数、call、apply)
  • 第六章 this关键字
    • 6.1 this概要及this如何引用
    • 6.2 如何确定this值
    • 6.3 在嵌套函数中用this关键字引用head对象
    • 6.4 充分利用作用域链研究嵌套函数问题
    • 6.5 使用call()、apply()控制this值

← jQuery之思维导图编写可维护的JavaScript →