首页 > 代码库 > javascript的基础知识及面向对象和原型属性

javascript的基础知识及面向对象和原型属性

2024-08-12 05:12:06   219人阅读

自己总结一下javascript的基础知识，希望对大家有用，也希望大家来拍砖，毕竟是个人的理解啊

1.1 类型检查：typeof（验证数据类型是：string）

var num = 123;console.log(typeof num); //

1.2 in 运算符

作用：判断指定属性是否存在于指定的对象中。如果指定的属性存在于指定的对象中，则 in 运算符会返回 true。语法：属性 in 对象返回值：true 或者 false示例：var obj = {    age: 18};var hasAge = "age" in obj;console.log(hasAge); //
  • 问题：如何判断对象存在某个属性或方法？
1 in2 浏览器能力检测

1.3 值类型和引用类型（重要）

值类型：变量中存储的是数值本身引用类型：变量中存储的是数据的引用（地址）对象中的属性可以是值类型也可以是引用类型
  • 面试题
var o = new Object();function foo(obj) {    obj.name = "腐女";    obj = new Object();    obj.name = "屌丝";}foo(o);console.log(o.name); //

1.4 逻辑中断

||如果第一个为真 就返回第一个表达式, 如果为假 则返回第二个表达式&&如果第一个为假 就返回第一个表达式, 如果为真则返回第二个表达式
  • 练习：
function fn(num) {    // 如果传入num，就打印num的值    // 如果没有传入 就打印 没有参数}

1.5 delete

作用：删除一个对象的属性。语法：delete 属性名返回值： true 或 false用法:1 删除数组中的元素2 删除对象的属性或方法3 删除没有用 var 声明 变量

1.6 try-catch

// 语法:try {    // 可能出现错误的代码} catch ( e ) {    // 出现错误会执行这里的代码} finally { // 可选    // 无论是否出现异常, 最后执行}// 手动抛出异常throw new Error("别瞎搞");throw "这都行？？？";

1.7 函数声明和函数表达式的区别

  • 函数声明不允许出现在其他中
// 函数声明function foo() {}// 函数表达式var foo = function foo() {};// 不推荐这么做！！if(true) {    function f() {        console.log(true);    }}f();

概念：语句和表达式

表达式：(有值)表达式（expression）是JavaScript中的一个短语，JavaScript解释器会将其计算出一个值。表达式可以是：数据 或者 数据和运算符的组合例如：1、"abc"、true、1 + 2、i++、a === b ? a : b 、a = 1语句：(带分号)语句是JavaScript的句子或命令，以分号结束。var a = 1;

2. 面向对象

2.1 为什么要面向对象？

面试中如何回答，什么是面向对象？

  • 1 面向对象和面向过程的异同
  • 2 在JavaScript中面向对象的表现形式
  • 3 其他语言中面向对象的表现形式（了解）

2.1.1 面向对象和面向过程的区别

  • jQuery创建对象和js创建对象对比
// jQuery$("body").append("<p>jQuery创建节点就是如此潇洒</p>");// jsvar p = document.createElement("p");var txt = document.createTextNode("creat E..，creat T..真麻烦");p.appendChild(txt);document.body.appendChild(p);
  • 面向对象和面向过程解释
面向过程：所有的细节、步骤、过程，要一步一步亲历亲为（执行者）面向对象：找到能完成这个事情的对象，让它帮你完成就行（调度者）生活中的例子：做饭（叫外卖）开公司

  • 问题：面向对象这么好，面向过程就没用了？面向对象是对面向过程的一个封装

  • 案例：给div和p添加红色边框

// 通过标签名获取元素function tag(tagStr) {    return document.getElementsByTagName(tagStr);}var divs = tag("div");for(var i = 0; i < divs.length; i++) {    divs[i].style.border = "1px dotted red";}var ps = tag("p");for(var i = 0; i < ps.length; i++) {    ps[i].style.border = "1px dotted red";}
  • 练习：写一个通过id属性获取元素的函数

2.1.2 函数封装的问题

  • 1 全局污染（变量在全局范围内有效）
  • 2 大量的函数无法管理
  • 3 使得维护变得困难

2.1.3 使用面向对象方式组织代码

// 使用对象var itcast = {    id: function(idStr) {        return document.getElementById(idStr);    },    tag: function(tagStr) {        return document.getElementsByTagName(tagStr);    }};

2.2 面向对象优势（解决函数封装问题）

  • 封装代码，使代码更好维护
  • 减少全局污染
  • 将功能相近的代码组织到一起维护方便，找错方便
var itcast = {    // 元素获取模块    getElem: {        tag: function() {},        id: function() {}    },    // 样式模块    css: {        addStyle: function() {},        removeStyle: function() {},        hasStyle: function() {}    }};

2.2.1 面向对象的基本模型

  • 1 将数据与功能封装成函数(方法)
  • 2 将相关的功能绑定到一起(对象)
  • 3 将功能进行分组(模块)

3. 常用DOM操作

3.1 四字总结：增删改查

3.1.1 获取元素操作

getElementById getElementsByTagName getElementsByClassName

3.1.2 元素节点操作

appendChild insertBefore removeChild replaceChild cloneNodecreateElement createTextNode（创建文本节点）

3.1.3 属性节点操作

getAttribute setAttribute removeAttribute

3.1.4 常用DOM属性

className innerHTML innerText/textContent valuechildren

3.2 DOM就是一个非常典型的面向对象，所有的节点都是对象

在DOM中所有的东西全部都是对象，所以，使用DOM非常简单方便jQuery中所有的东西也都是对象

4. 面向对象

  • 案例：写一个对象描述一个人要求有姓名、年龄、性别、sayHello

4.1 对象字面量（直接量）

4.1.1 对象是键值对的集合

  • 属性访问语法：点运算符 和 []
// json 的表示法， 对象的直接量（字面量）var p = {    name: "jim",    age: 19,    sex: "男",    sayHello: function() {        alert("你好，哈哈哈哈");    }};p.sayHello();// 此时可以把对象称为：关联数组p["sayHello"]();
  • 字面量的缺点：无法复用
例如：描述一个商品 Goods(name, price, img, count, pDate)假如有 100 件

4.2 构造函数

  • 优势：可复用

4.2.1 构造函数使用注意点（重点）

  • 1 函数名以大写字母开头(推荐)
  • 2 不需要返回值
  • 3 为对象添加成员使用 this.成员名 = 值
  • 4 创建对象使用 new 关键字
var Person = function() {    this.name = "jim";    this.age = 19;    this.gender = "男";    this.sayHello = function() {        alert("你好，哈哈哈哈");    };};// 创建对象（构造函数Person的对象）var p = new Person();// 访问对象的 属性console.log(p.name);// 访问对象的 方法p.sayHello();
  • 案例：修改 Person 为带参数的形式
  • 练习：
写一个学生 Student, 要求有 姓名性别年龄和课程分数(语文, 数学, 英语)和说话的方法

4.3 函数参数问题

  • 案例：求三角形面积（ s = d * h / 2）
// 不使用函数var area = 10 * 10 / 2;// 封装成函数function getArea() {    var area = 10 * 10 / 2;    return area;}// 改进function getArea(bottom, height) {    return bottom * height / 2;}getArea(10, 20);

4.3.1 函数参数注意点

  • 1 把函数参数看作是变量，只能在函数内部使用
  • 2 函数调用时参数传入顺序不能颠倒
  • 3 参数的值是在函数被调用的时候通过传入的参数设置的值

  • 4 函数调用时不传入参数，则函数内部获取参数的值为：undefined

  • 练习：写一个函数打印一段文字，要求：传入什么内容，就打印什么内容

4.3.2 形参和实参

形参（形式参数），即函数定义时的参数，只起到占位的作用，等到函数被调用的时候，会被传入的具体值代替。【联想数学公式】 s = d * h / 2;实参（实际参数），即函数被调用时的参数，是一个具体的值或者表达式（1、"老司机"、true、[2, 2]、{ name: "two"} 等）

4.4 原型（prototype）

4.4.1 方法放在构造函数中的缺点

  • 浪费内存
构造函数中的属性和方法，会在调用的时候被处理，即会消耗内存。new 出来的对象，都是一个单独副本new 一个对象就占用一份内存，new 多少对象就占用多少份内存。但是对于构造函数中的方法来说，每个对象的方法都是相同的（或者说应该是被共享的）

对于典型的淘宝商品详情页，经测试发现，每增加一个 DOM 节点，会导致首屏渲染时间延迟约 0.5ms

4.4.2 原型的说明

  • 一个对象的原型就是：构造函数的prototype属性的值
  • 只要是函数就有 prototype 属性，即函数的原型属性
  • 函数的原型属性（prototype）的类型是："object"
  • 由 构造函数 创建出来的对象，会默认链接到其构造函数的这个属性（prototype）的值上
  • 构造函数的 prototype 属性的作用是：实现数据共享
function Person() {}// prototype 即 原型Person.prototype.legs = 2;var p = new Person();console.log(p.legs);

4.4.3 属性查找规则

在访问对象的某一个属性 (方法)的时候：1 首先会在当前对象中查找有没有该属性2 如果当前对象没有, 就会在构造方法的定义规则中查找(当前对象)3 如果没有, 就会到与对象联系起来的 构造函数的 prototype 属性的值中找

4.5 利用原型改良构造函数

// 对象会到 与它联系的 prototype 中找数据  // 可以考虑将共享的数据, 放到 里面function Person(name) {    this.name = name;}Person.prototype.sayHello = function() {    alert(this.name);};var p = new Person();p.sayHello();
  • 原则：只将公共的属性和方法放到 prototype 中

4.5.1 属性修改和读取的区别

获取操作：遵循属性查找原则赋值操作（只与当前对象有关）：只会操作对象本身，如果对象中没有该属性则创建该属性，并赋值；如果对象中有，则修改

4.6 prototype 和 __proto__

  • __proto__ 是非标准属性
对象中有一个属性 叫 __proto__  对象的 __proto__ 与创建它的构造函数的 prototype 是一个东西
function F() {}var o = new F();console.log(o.__proto__ === F.prototype);
  • 术语
F.prototype  原型属性f.__proto__  原型对象F.prototype 是 构造函数F的 原型属性f.__proto__ 是 对象f的     原型对象

javascript的基础知识及面向对象和原型属性


联系
我们