JavaScript高级程序设计——知识点整理（Part 3）

最新推荐文章于 2024-04-19 10:18:52 发布
最新推荐文章于 2024-04-19 10:18:52 发布
阅读量312 收藏
点赞数
分类专栏： 读书笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luchengbing0120/article/details/78162838
版权

理解对象

  • 属性类型

    1. 数据属性，包含一个数据值的位置

      • [[Configurable]]表示能否通过delete删除属性，能否修改属性的特性，能否把属性修改为访问器属性
      • [[Enumerable]]表示能否通过for-in循环返回属性
      • [[Writable]]表示能否修改属性的值
      • [[Value]]包含这个属性的数据值
      • 修改默认属性的特性Object.defineProperty()
      var person = {};
Object.defineProperty(person, "name", {
    writable: false,
    value: "Nicholas"
});
alert(person.name);    //"Nicholas"
person.name = "Greg";
alert(person.name);    //"Nicholas"

      可以多次调用Object.defineProperty()修改同一个属性，但把configurable设置为false之后，就只能修改writable特性，修改 其他会报错

      • 字面量方法定义属性，该属性的数据属性默认值如下：configurable、enumerable、writable为true，value为undefined
      • Object.defineProperty()如果不指定，该属性的数据属性默认值如下：configurable、enumerable、writable为false，value为 undefined

    2. 访问器属性，不包含数据值

      • [[Configurable]]表示能否通过delete删除属性，能否修改属性的特性，能否把属性修改为数据属性
      • [[Enumerable]]表示能否通过for-in循环返回属性
      • [[Get]]在读取属性时调用的函数
      • [[Set]]在写入属性时调用的函数
      • 访问器属性不能直接定义，必须使用Object.defineProperty()来定义
      var book = {
    _year: 2004,
    edition: 1
};
Object.defineProperty(book, "year", {
    get: function() {
        return this._year;
    },
    set: function(newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
book.year = 2005;
alert(book.edition);    //2
      1. 下划线用于表示只能通过对象方法访问的属性
      2. 不一定要同时指定getter和setter，不指定表示不能读或者不能写

  • 定义多个属性

var book = {};
Object.defineProperties(book, {
    _year: {
        value: 2004
    },
    edition: {
        value: 1
    },
    year: {            
        get: function() {
            return this._year;
        },
        set: function(newValue) {
            if (newValue > 2004) {
                this._year = newValue;
                this.edition += newValue - 2004;
            }                  
        }            
    }        
});
book.year = 2005;
alert(book.edition);    //2

  • 读取属性的特性

    1. Object.getOwnPropertyDescriptor()
    var descriptor = Object.getOwnPropertyDescriptor(book, "_year");    //数据属性
alert(descriptor.value);           //2004
alert(descriptor.configurable);    //false
alert(typeof descriptor.get);      //"undefined"
var descriptor = Object.getOwnPropertyDescriptor(book, "year");    //访问器属性
alert(descriptor.value);           //undefined
alert(descriptor.enumerable);      //false
alert(typeof descriptor.get);      //"function"

创建对象

  • 工厂模式

    function createPerson(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };    
    return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
person1.sayName();    //"Nicholas"
person2.sayName();    //"Greg"
    1. 解决了创建多个相似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）

  • 构造函数模式

    function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
        alert(this.name);
    };    
}
//  当作构造函数使用      
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName();   //"Nicholas"
//  作为普通函数调用
Person("Greg", 27, "Doctor");  //添加到window
window.sayName();   //"Greg"
//  在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName();    //"Kristen"
    1. 两个对象都有一个constructor（构造函数）属性，该属性指向Person
    2. 缺陷在于：每个对象都有一个名为sayName()的方法，但这些方法又不是同一个Function的实例

  • 原型模式

    function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var person1 = new Person();
person1.sayName();   //"Nicholas"
var person2 = new Person();
person2.sayName();   //"Nicholas"
alert(person1.sayName == person2.sayName);  //true

    1. 理解原型对象
      这里写图片描述

      • 实例的[[Prototype]]指向原型对象，而不是构造函数；构造函数的prototype属性也指向原型对象；而原型对象的constructor属性指 向构造函数
      • isPrototypeOf()表示参数的[[Prototype]]是否指向调用者，即调用者是不是参数的原型对象
      • Object.getPrototypeOf()返回[[Prototype]]的值，即原型对象
      • 当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性；使用delete操作符可以删除实例属性，使我们能够重 新访问原型中的属性
      • hasOwnProperty()可以检测一个属性是存在与实例中还是存在于原型中
    2. 原型与in操作符
      • 单独使用in操作符，会在通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是原型中
      • 使用for-in循环时，返回的是所有能够通过对象访问的、可枚举的（enumerable）属性，包括实例和原型中的
      • 要获得对象上所有可枚举的实例属性，可以使用Object.keys()方法，该方法接受一个对象作为参数，返回一个包含所有可枚举属性的 字符串数组，可作用于原型对象
      • Object.getOwnPropertNames()返回所有实例属性，无论它是否可枚举，可作用于原型对象

    3. 更简单的原型语法

      function Person(){
}
Person.prototype = {
    name : "Nicholas",
    age : 29,
    job: "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};
var friend = new Person();
alert(friend instanceof Object);  //true
alert(friend instanceof Person);  //true
alert(friend.constructor == Person);  //false
alert(friend.constructor == Object);  //true
      • 重写了默认的prototype对象，因此constructor属性也就变成了新对象的constructor属性（指向Object构造函数），不再指向 Person函数
      • 可以特意设置constructor属性的值，但是这样又会导致constructor属性的[[Enumerable]]特性被设置为true，默认是false的。代码 如下：
      function Person(){
}
Person.prototype = {
    constructor : Person,
    name : "Nicholas",
    age : 29,
    job: "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};
      • 可以使用defineProperty()添加constructor属性，并设置[[Enumerable]]特性为false

    4. 原型的动态性

      • 即使是先创建了实例，后修改原型，也能够立刻从实例上反映出来
      • 但如果是重写整个原型对象，情况就不一样
        这里写图片描述

  • 组合使用构造函数模式和原型模式

    1. 构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性
    function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
}
Person.prototype = {
    constructor: Person,
    sayName : function () {
        alert(this.name);
    }
};
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends);    //"Shelby,Court,Van"
alert(person2.friends);    //"Shelby,Court"
alert(person1.friends === person2.friends);  //false
alert(person1.sayName === person2.sayName);  //true

  • 动态原型模式

    function Person(name, age, job){
    //属性
    this.name = name;
    this.age = age;
    this.job = job;
    //方法
    if (typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            alert(this.name);
        };
    }
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();
    1. sayName()方法不存在的情况下，将它添加到原型中

  • 寄生构造函数模式

    function Person(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };    
    return o;
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();  //"Nicholas"
    1. 建议在可以使用其他模式的情况下，不要使用这种模式

  • 稳妥构造函数模式

    function Person(name, age, job) {
    //创建要返回的对象
    var o = new Object();
    //可以在这里定义私有变量和函数
    //添加方法
    o.sayName = function() {
        alert(name);
    };
    //返回对象
    return o;
}
var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName();    //"Nicholas"
    1. 与寄生构造函数模式的区别在于：
      • 新创建对象的实例方法不引用this
      • 不适用new操作符调用构造函数
    2. 变量friend中保存的是一个稳妥对象，而除了调用sayName()方法外，没有别的方法可以访问其数据成员（传入到构造函数中的原始数据）

继承

  • 原型链

    function SuperType() {
    this.property = true;
}
SuperType.prototype.getSuperValue = function() {
    return this.property;
};
function SubType() {
    this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
    return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue());   //true

    这里写图片描述

    1. 给原型添加方法的代码一定要放在替换原型的语句之后
    2. 通过原型链实现继承时，不能使用对象字面量创建原型方法，这样会重写原型链

  • 借用构造函数

    function SuperType() {
    this.colors = ["red", "blue", "green"];
}
function SubType() {  
    //inherit from SuperType
    SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);    //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors);    //"red,blue,green"

  • 组合继承（最常用的继承模式）

    1. 将原型链和借用构造函数的技术组合到一块
    function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
    alert(this.name);
};
function SubType(name, age) {
    //继承属性
    SuperType.call(this, name);
    this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
    alert(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors);  //"red,blue,green,black"
instance1.sayName();      //"Nicholas";
instance1.sayAge();       //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors);  //"red,blue,green"
instance2.sayName();      //"Greg";
instance2.sayAge();       //27

  • 原型式继承

    1. Object.create()方法，接受两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象
    var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};         
var anotherPerson = Object.create(person, {
    name: {
        value: "Greg"
    }
});
alert(anotherPerson.name);  //"Greg"

  • 寄生式继承

    function createAnother(original) {
    var clone = object(original);    //通过调用函数创建一个新对象
    clone.sayHi = function() {    //以某种方式来增强这个对象
        alert("hi");
    };
    return clone;    //返回这个对象
}

  • 寄生组合式继承（引用类型最理想的继承范式）

    1. 在组合继承中，继承方法的语句，会将超类实例的属性添加到子类的原型中，然后在继承属性的语句中，会将超类实例的属性添加到子类的 实例中从而覆盖原型中的属性，所以继承方法的时候不需要实例的属性，修改为使用object函数创建对象
    function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype);   //创建对象
    prototype.constructor = subType;               //增强对象
    subType.prototype = prototype;                 //指定对象
}                   
function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
};
function SubType(name, age){  
    SuperType.call(this, name);
    this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors);  //"red,blue,green,black"
instance1.sayName();      //"Nicholas";
instance1.sayAge();       //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors);  //"red,blue,green"
instance2.sayName();      //"Greg";
instance2.sayAge();       //27
Luxus_C
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript 高级程序设计（第3版）超清中文PDF
10-20
Javascript 高级程序设计（第3版）超清中文PDF带目录完整版，个人的学习使用，共25M。
《JavaScript高级程序设计》读书笔记
MK.Gao Blog
02-28 1048
1.JavaScript实现 JavaScript 与 ECMAScript 之间的关系：    * 核心（ECMAScript） 语法 类型 语句关键字保留字 操作符 对象    * 文档对象模型（DOM）        是针对 XML 但经过扩展用于 HTML 的应用程序编        程接口（API，Application Programming Interface）。DOM 把整个页面映...
JavaScript高级程序设计第四章知识点总结
瘦肉的博客
07-22 232
第四章 变量、作用域和内存问题 本章内容 理解基本类型和引用类型的值 理解执行环境 理解垃圾收集 JS变量松散类型的本质，决定了它只是再特定时间用于保存特定值的一个名字而已。 4.1 基本类型和引用类型的值 基本类型指的是简单的数据段，引用类型指的是那些可能由多个值构成的对象。 五种基本数据类型：Undefined、Null、Boolean、Number和String。这五种基本数据...
1）JavaScript高级程序设计--JavaScript简介知识点
weixin_37861326的博客
07-11 263
1.1 Javascript是什么？Javascript是一门功能全面的编程语言，能够处理复杂的计算与交互，拥有闭包、匿名函数，甚至元编程等特性。1.2 JavaScript实现虽然javascript和ECMAScript通常被人们用来表达相同的含义，但Javascript的含义却比ECMA-262中规定的更多。一个完整的JavaScript实现应该包括下列三个不同的组成部分：1. 核心（ECM...
《JavaScript高级程序设计（第3版）》知识点笔记1
Catie
09-11 586
1、JavaScript是一种专为网页交互而设计的脚本语言，由三个不同部分组成：     ECMAScript，提供核心语言功能     文档对象模型（DOM），提供访问和操作页面内容的方法和接口     浏览器对象模型（BOM），提供与浏览器交互的方法和接口 2、HTML4.01为标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造，也就是说，脚本会延迟到
《javascript高性能程序设计》知识点小结
weixin_30306905的博客
11-19 88
1.javascript 包括三部分：ECMAScript、DOM、BOM； ECMAScript规定了这么语言的下列组成部分：语法、类型、语句、关键字、保留字、操作符、对象； DOM，是针对XML但是经过扩展用于HTML的应用程序接口（API），DOM把整个页面映射成一个多层节点结构 BOM,可以访问和操作浏览器窗口的浏览器对象模型。包括的内容有：处理浏览器窗口和框架、弹出新浏览窗口、移动...
JavaScript程序设计——事件处理实验报告.docx
11-11
1．实现JavaScript事件注册； 2．实现JavaScript事件处理函数；...3．实现JavaScript鼠标和键盘事件； 4．实现JavaScript表单相关事件； 5．实现JavaScript字幕滚动事件； 6．实现JavaScript编辑事件；
JavaScript程序设计——DOM访问实验报告.docx
11-11
3．实现文档对象的使用方式。 问：如何使用HTML DOM getElementsByTagName() 方法获取文档中所有的表： 答： Var tables = document.getElementsByTagName("table"); alert("This document contains contains"+...
JavaScript高级程序设计读书感想——第七章
01-20
一.前言 这一章我们讨论函数表达式。主要涉及函数表达式的特征、闭包和私有变量等内容。 二.匿名函数 我们知道创建一个函数有两种方法： //函数声明 ...三....function createComparisonFu
JavaScript程序设计——页面设置与表单验证实验报告.docx
11-11
实现HTML界面设计、布局的方法。 实现各种控件的使用方法。 实现对界面项目进行表单验证的方法。 实现表单标记，表单提交方式、编码方式等知识点。
JavaScript 高级程序设计（第四章）基础知识点
记录学习前端的点滴知识
04-04 427
**变量，作用域和内存问题** 4.1 ECMAScript变量的可能包含两种不同数据类型的值：基本类型值（简单的数据段）和引用类型值（多个值构成的对象）。 4.11 只能给引用类型值动态的添加属性。 引用类型值 基本类型的值 注：浏览器为IE8 4.12复制变量的值 基本类型值： var num1=5; var num2=5; 自己理解：num1和num2的值最
js中的各种遍历
lele的博客
08-14 239
JavaScript中的各种遍历 对象的遍历 对象属性的遍历，方法有以下几种 for...in Object.keys() Object.getOwnPropertyNames() 1. for...in for...in是通过in运算符遍历对象中的可枚举属性，包括原型中的属性 // 构造函数中定义私有属性 function Animal(name) { this.name=name this.run = function() { console.log(t...
HTML、CSS、JavaScript网页制作从入门到精通
Luxus_C的博客
09-19 5396
这大概是我第一次写博客吧，自从大一开始写代码，至今也有5年的光景了，很遗憾并没有养成写博客的习惯，一方面因为我平时很少有阶段性的总结，另一面也确实不知道该分享些什么。归根结底还是功夫不到家，没有一些让自己骄傲的阶段性成果。既然要写，还是决定从读书笔记开始，记下自己学习的心得，一方面可以分享给大家，另一方面也可温故而知新。作为我的第一篇读书笔记，下面进入正题：HTML <meta>标签可以设置relo
CSS+DIV网页样式与布局从入门到精通
Luxus_C的博客
09-19 1165
前面这两本书感觉都有些基础，没有多少新知识，就当巩固一下基础，查漏补缺。 CSS选择器： 标签选择器 类选择器 伪类和伪对象选择器 子选择器 相邻选择器 属性选择器： 匹配属性名[class]，img[alt] 匹配属性值div[id][title="ok"] 前缀匹配[class^="my"] 后缀匹配[class$="test"] 模糊匹配[class*="es"] 通用选择器 包含选择器
JavaScript高级程序设计——知识点整理（Part 1）
Luxus_C的博客
10-05 429
数据类型 基本类型：Undefined、Null、Boolean、Number、String 引用类型：ObjectUndefined 变量声明但未初始化时，值为undefined Null Boolean Number： 永远不要测试某个特定的浮点数值 NaN： 任何数值除以非数值，以及0除以0，返回NaN 任何涉及NaN的操作都会返回NaN NaN与任何值都不相等，包括NaN本身 数值转换
JavaScript高级程序设计——知识点整理（Part 2）
Luxus_C的博客
10-05 407
Date类型 创建日期对象 Date()构造函数必须传入表示该日期的毫秒数（也可以传递表示日期的字符串，会自动转化为毫秒数） 字符串日期转化为毫秒数之后可以作为Date()构造函数的参数，方法有两种：Date.parse()和Date.UTC() 直接调用new Date(表示日期的字符串)，会根据参数自动选择以上两种方法转化为毫秒数作为构造函数的参数 获得当前时间转化成的毫秒数 Date.no
JEECG表格选中状态怎么去掉
最新发布
weixin_39031037的博客
04-19 388
官网代码（在取消选中状态的时候不生效）
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 978
​​​​​​​。
javascript高级程序设计 源码
02-04
总的来说，读者可以通过阅读《JavaScript高级程序设计》的源码来系统地学习 JavaScript，对书中的知识点有更深入的认识和理解。同时，通过运行和修改源码，读者还可以在实践中提升自己的编程能力，获得更多的学习...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值