美文网首页我爱编程
第二章 js基础知识上

第二章 js基础知识上

作者: qqqc | 来源:发表于2018-05-21 23:36 被阅读0次

2-1 变量类型和计算

题目

  • JS 中使用 typeof 能得到的哪些类型
  • 何时使用 === 何时使用 ==
正常情况都是用 ===
if(obj.a ==null){
  // 这里相当于 obj.a === null || obj.a === undefined 的简写形式
  // 这是jq 源码推荐的写法
}
  • JS 中有哪些内置函数
Obiect
Array
Boolean
Number
String
Function
Date
RegExp
Error
  • JS 变量按照存储方式区分为哪些类型,并描述其特点
    值类型 特点: 独立内容块
    引用类型 特点: 变量共用内存块,节省内存空间

  • 如何理解JSON

// JSON 只是一个js对象
JSON.stringify({a: 10,b:20})
JSON.parse(' {"a": 20, "b": 20} ')

知识点

变量类型

  • 值类型 vs 引用类型
// 值类型
var a = 100
var b = a
a = 200
console.log(b) //100

//引用类型
var a = {age: 20}
var b = a
b.age = 21
console.log(a.age) //
  • typeof 运算符详解
typeof undefined // undefined
typeof 'abc' // string
typeof 123 //numbur
typeof true //boolean
typeof {} //obiect
typeof [] //obiect
typeof null //obiect
typeof console.log // function

变量计算

  • 字符串拼接
  • == 运算符
  • if语句
  • 逻辑运算
// 字符串拼接
var a = 100 + 10 //110
var b = 100 + '10' // '10010'

// == 运算符
100 == ‘100’ //true
0 == ' ' // true
null == undefined // true

// if 语句
var a = true
if(a){
  //
}
var b = 100
if(b) {
  //
}
var c  = ' '
if(c){
  //
}

// 逻辑运算符
console.log(10 && 0) //0
console.log(' ' || 'abc') //abc
console.log(!window.abc) // true

//判断一个变量会被当成true还是false
var a = 100
consloe.log(!!a)  //true

2-2 原型和原型链

题目

  • 如何准确判断一个变量是数组类型
var arr = []
arr instanceof Array // true
typeof arr //Objeict ,typeof 是无法判断是否是数组
  • 写一个原型链继承的例子
  • 描述 new 一个对象的过程
 创建一个新对象
 this 指向这个新对象
 执行代码,即对 this 赋值
 返回 this
  • zepto(或其他框架) 源码中如何使用原型链

知识点

  • 构造函数
function Foo(name, age){
  this.name = name;
  this.age = agel;
  this.className = 'class-1'
  // return this 默认有这一行
}
var f = new Foo('zhangsan', 18)
var f1 = new Foo('zhangsan1', 18) //创建多个对象
  • 构造函数 - 扩展
var a = {} 其实是 var a = new Object() 的语法糖
 var a = [] 其实是 var a = new Array() 的语法糖
 function Foo(){...} 其实是 var Foo = new Function(...)
 使用 instanceof 判断一个函数是否是一个变量的构造函数
  • 原型规则和示例

所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性(除了“null”意外)

var obj = {}; obj.a = 100;
var arr = []; arr.a =100;
function fn (){}  fn.a = 100;

console.log(obj._proto_);
console.log(arr._proto_);
console.log(fn._proto_);

console.log(fn.prototype);

console.log(obj._proto_ === Object.prototype);

所有的引用类型(数组、对象、函数),都有一个proto属性,属性值是一个普通的对象

console.log(obj._proto_);
console.log(arr._proto_);
console.log(fn._proto_);

所有的函数,都有一个 prototype 属性,属性值也是一个普通的对象

console.log(fn.prototype);

所有的引用类型(数组、对象、函数),proto属性值指向它的构造函数的 ”prototype“ 属性值

console.log(obj._proto_ === Object.prototype);

当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的 proto(即它的构造函数的prototype)中寻找。

// 构造函数
function Foo(name){
  this.name = name
}

Foo.prototype.alertName = function(){
  alert(this.name)
}
// 创建实例
var f = new Foo('zhangsan');
f.printName = function(){
  console.log(this.name)
}

// 测试
f.printName()
f.alertName()
  • 原型链
// 构造函数
function Foo(name){
  this.name = name
}

Foo.prototype.alertName = function(){
  alert(this.name)
}
// 创建实例
var f = new Foo('zhangsan');
f.printName = function(){
  console.log(this.name)
}

// 测试
f.printName()
f.alertName()
f.toString() //要去f._proto_._proto_ 中查找
image.png
  • instanceof

f instanceof Foo 的判断逻辑是:
f 的 proto 一层一层往上,能否对应到 Foo.prototype
再试着判断 f instanceof Object

相关文章

  • javascript基础面试题

    第一章 课程简介 第二章 JS基础知识(上) 第三章 JS基础知识(中) 第四章JS基础知识(下) 第五章 JS-...

  • 第二章 js基础知识上

    2-1 变量类型和计算 题目 JS 中使用 typeof 能得到的哪些类型 何时使用 === 何时使用 == JS...

  • 前端JavaScript面试技巧

    第5章 JS-Web-API(上) 从基础知识到JSWebAPI 下面来进行一个抛砖引玉回顾JS基础知识1.变量类...

  • 前端JS基础六(DOM)

    前面我写了JS基础知识,接下来要开始写JS-WEB-API JS基础知识:ECMA 262标准 JS-WEB-AP...

  • 5-1 从基础知识到JSWebAPI

    回顾js基础知识 JS-web-API 总结 回顾js基础知识 变量类型和计算 原型和原型链 闭包与作用域 异步和...

  • React 高阶组件

    第一章 引导 学习之前要有一定的:es6基础、js面向对象编程、react的一些基础知识 第二章 高阶组件介绍 2...

  • 大厂面试TS(上)

    一、TS面试基础知识 1、什么是TS? 概念:ts 是 js 的超集,即在原有的js语法基础上,添加强类型并切换为...

  • 第五章 js-web-api 上

    5-1 从基础知识到web-api JS基础知识:ECMA 262 标准 JS-Web-API:W3C 标准 W3...

  • React-Native 随笔

    学习基础: js的基础知识, rect.js基础 JSX语法基础 FlexBox布局 安装 安装node.js下载...

  • js入门知识点

    * 基础知识 * js的输出方式 * js的组成 * js的命名规范 * 数据类型 * number数据类型 * ...

网友评论

    本文标题:第二章 js基础知识上

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