2022-04-07 深入JavaScript高级语法三——面向对象

已于 2022-12-12 15:00:01 修改
阅读量878 收藏
点赞数
分类专栏： js学习 文章标签： javascript 前端 开发语言
于 2022-05-06 17:17:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41068717/article/details/124019236
版权

目录

1、面向对象初识

1.1、创建对象的方式

  1. 通过new Object()创建
  2. 通过字面量形式创建

1.2、对对象属性的操作

  1. 获取属性
  2. 给属性赋值
  3. 删除属性

1.3、对属性操作的控制——Object.defineProperty

1.3.1、语法

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

  • 语法：
Object.defineProperty(obj, prop, descriptor);

可接收三个参数：

  • obj要定义属性的对象
  • prop要定义或修改的属性的名称或Symbol
  • descriptor要定义或修改的属性描述符

1.3.2、属性描述符分类

  • 数据属性描述符
  • 存取属性描述符
    在这里插入图片描述

1.3.3、数据属性描述符的特征

数据属性描述符有如下四个特征：

  • [[configurable]]：表示属性是否可以通过delete属性删除，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；

解释：

  • 表示属性是否可以通过delete属性删除：即使用delete删除该属性后，再次访问该属性依然存在。
  • 是否可以修改它的特性：设置configurable为false后再次通过Object.defineProperty修改该prop的属性描述符，是不生效的，就算把configurable再次改成true也不会生效。

注意：

  • 当我们直接在一个对象上定义某个属性时，这个属性的[[configurable]]为true；
  • 当我们通过属性描述符定义一个属性时，这个属性的[[configurable]]默认为false；
  • [[enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；

注意：

  • 当我们直接在对象上定义某个属性时，这个属性的[[enumerable]]为true；
  • 当我们通过属性描述符定义一个属性时，这个属性的[[enumerable]]默认为false；
  • [[writable]]：表示是否可以修改属性的值；

注意：

  • 当我们直接在一个对象上定义某个属性时，这个属性的[[writable]]为true；
  • 当我们通过属性描述符定义一个属性时，这个属性的[[writable]]默认为false；
  • [[value]]：属性的value值，读取属性时会返回该值，修改属性时，会对齐进行修改；

注意：

  • 当我们直接在一个对象上定义某个属性时，这个属性的[[value]]为我们设置的初始值；
  • 当我们通过属性描述符定义一个属性时，这个属性的[[value]]默认为undefined；

1.3.4、存取属性描述符的特征

存取属性描述符有如下四个特征：

  • [[configurable]]：表示属性是否可以通过delete属性删除，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；
  • [[enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；
  • [[get]]：获取属性时会执行的函数。默认为undefined；
  • [[set]]：设置属性时会执行的函数。默认为undefined；

存储属性描述符使用场景：

  1. 隐藏某一个私有属性，不希望直接被外界使用和赋值
  2. 如果我们希望截获某一个属性访问和设置值的过程时，也会使用存储属性描述符(vue2响应式实现原理)
var obj = {
  name: 'zhangsan',
  _address: '北京市'
}

Object.defineProperty(obj, 'address', {
  enumerable: true,
  configurable: true,
  get: function() {
    foo();
    return this._address;
  },
  set: function(value) {
    bar();
    this._address = value;
  }
});

console.log(obj.address);

obj.address = '上海市';
console.log(obj.address);

function foo() {
  console.log('获取了address的值');
}


function bar() {
  console.log('设置了address的值');
}

1.4、定义多个属性描述符——Object.defineProperties

var obj = {
  // 私有属性（js里面没有严格意思上的私有属性，只是在js社区里面约定俗成的规范：以_开发表示私有）
  _age: 18
};

Object.defineProperties(obj, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: 'why'
  },
  age: {
    configurable: false,
    enumerable: false,
    get: function() {
      return this._age;
    },
    set: function(value) {
      this._age = value;
    }
  },
});

console.log(obj.age);

obj.age = 20;
console.log(obj.age);

set/get的另一种写法：

var obj = {
  // 私有属性（js里面没有严格意思上的私有属性，只是在js社区里面约定俗成的规范：以_开发表示私有）
  _age: 18,
  get age() {
    return this._age;
  },
  set age(value) {
    this._age = value;
  }
};

1.5、获取某一个特定属性的属性描述符

  • 语法：
Object.getOwnpropertyDescriptor(obj, prop);

1.6、获取对象所有属性的属性描述符

  • 语法：
Object.getOwnpropertyDescriptors(obj);

2、Object上的方法——对对象进行限制

1、禁止对象继续添加新的属性

  • 语法：
Object.preventExtensions(obj);

var obj = {
  name: 'why',
  age: 18
}

Object.preventExtensions(obj);

obj.height = 1.88;

// height没有添加上
console.log(obj);

2、禁止对象配置/删除里面的属性

  • 语法：
Object.seal(obj);

var obj = {
  name: 'why',
  age: 18
}

Object.seal(obj);

delete obj.name;
// name没有被删除掉
console.log(obj);

3、让属性不可以修改

  • 语法：
Object.freeze(obj);

var obj = {
  name: 'why',
  age: 18
}

Object.freeze(obj);

obj.name = 'mary';
// name没有被修改
console.log(obj.name);

3、创建多个对象的方案

3.1、方案一——字面量形式

3.1.1、实现

var obj1 = {
  name: 'zhangsan',
  age: 11
  ...
}

var obj2 = {
  name: '李四',
  age: 18
  ...
}

3.1.2、缺点

如果对象结构相似的话，会写大量重复的代码。

3.2、方案二——工厂模式

3.2.1、实现

function createPerson(name, age, height, address) {
  // 也可通过new Object()的方式生成一个对象
  var p = {};
  p.name = name;
  p.age = age;
  p.height = height;
  p.address = address;
  
  p.eating = function() {
    console.log(this.name + '在吃东西');
  }
  
  p.running = function() {
    console.log(this.name + '在跑步');
  }
  
  return p;
}

var p1 = createPerson('张三', 18, 1.88, '四川省');
var p2 = createPerson('李四', 21, 1.70, '贵州省');

3.2.2、缺点

  • 获取不到对象最真实的类型(都是Object类型，过于宽泛，而不是这里的确定的Person类型)；

3.3、方案三——构造函数

3.3.1、认识构造函数

  • 构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别；
  • 如果这么一个普通的函数被使用new操作符来调用了，那么这个函数就称之为是一个构造函数；

3.3.2、new操作符调用的作用

  1. 在内存中创建一个新的对象（空对象）；
  2. 这个对象内部的[[prototype]]属性(隐式原型)会被赋值为该构造函数的prototype属性(显式原型)；
  3. 构造函数内部的this，会指向创建出来的新对象；
  4. 执行函数的内部代码（函数体代码）；
  5. 如果构造函数没有返回非空对象，则返回创建出来的新对象；（即显式地返回基本数据类型或null或undefined时，调用构造函数仍会返回创建出来的新对象。）

3.3.3、实现

function Person(name, age, height, address) {
  this.name = name;
  this.age = age;
  this.height = height;
  this.address = address;
  
  this.eating = function() {
    console.log(this.name + '在吃东西');
  }
  
  this.running = function() {
    console.log(this.name + '在跑步');
  }
}

var p1 = new Person('张三', 18, 1.88, '四川省');
var p2 = new Person('李四', 21, 1.70, '贵州省');

*约定俗成的规范：构造函数的首字母一般是大写的。

3.3.4、缺点

console.log(p1.eating === p2.eating); // false
console.log(p1.running === p2.running); // false

当通过构造函数创建的对象的某个属性为函数时，每创建一个新的对象，它们都会创建新的函数对象，造成空间的浪费。

3.4、对象的原型

3.4.1、对象的原型理解

我们每个对象中都有一个[[prototype]]，这个属性称之为对象的原型（隐式原型：直接看不到它，并且不会直接使用或者修改它）。

早期的ECMA是没有规范如何查看[[prototype]]的。浏览器厂商给对象中提供了一个属性[[__proto__]]，可以查看一下这个原型对象（浏览器提供，不是规范，生产中不建议使用，用于开发环境中方便测试）。

var obj = {name: '11'}
var info = {}

console.log(obj.__proto__)
console.log(info.__proto__)

ES5之后提供的Object.getPrototypeOf可以获取到对象的原型

Object.getPrototypeOf(obj);

3.4.2、原型的作用

当我们从一个对象中获取某一个属性时，它会触发[[get]]操作：

  1. 在当前对象中去查找对应的属性，如果找到就直接使用；
  2. 如果没有找到，那么会沿着它的原型链[[prototype]]去查找；

3.5、函数的原型

  • 函数也是一个对象，因此它也有[[prototype]]隐式原型；
  • 函数因为它是一个函数，所以它还会多出来一个显式原型属性：prototype；
function foo() {}

var p1 = new foo();
// new操作符调用函数的第二点
console.log(p1.__proto__ === foo.prototype); // true

在这里插入图片描述
结论：

实例对象.__proto__ === 构造函数.prototype
  • 根据原型查找对象属性举例：
function Person() {
  
}

var p1 = new Person();
var p2 = new Person();

// 都是为true
console.log(p1.__proto__ === Person.prototype);
console.log(p2.__proto__ === Person.prototype);

// p1.name = 'why';
// p1.__proto__.name = 'zhangsan';
// Person.prototype.name = 'lisi';
p2.__proto__.name = 'wangwu';

console.log(p1.name);

3.6、函数原型上的属性

3.6.1、自有的 constructor 属性

构造函数.prototype.constructor === 构造函数

function Person() {
  
}

/**
 * [object Object] {
  constructor: [object Object] {
    configurable: true,
    enumerable: false,
    value: function Person() {
    
    },
    writable: true
  }
}
 */
console.log(Object.getOwnPropertyDescriptors(Person.prototype));

3.6.2、自己定义属性

function Foo() {

}

// 1.添加少量的属性时
// Foo.prototype.name = 'kk';
// Foo.prototype.height = '1.88';
// Foo.prototype.running = function() {
//     console.log('在跑步');
// }

// 2.为了减少重复写Foo.prototype，可以直接赋值为一个对象
// Foo.prototype = {
//     name: 'kk',
//     height: '1.88',
//     running: function() {
//         console.log('在跑步');
//     }
// }

// 3.方式2写法的不足，constructor属性不存在了
// 3.1.解决方式1，手动添加上constructor属性，并让它指向构造函数。不足：constructor变得可枚举了，原生的是不可枚举的
// Foo.prototype = {
//     constructor: Foo,
//     name: 'kk',
//     height: '1.88',
//     running: function() {
//         console.log('在跑步');
//     }
// }

// 3.2.解决方式1的不足，通过Object.defineProperty添加（真实开发也是这样使用）
Foo.prototype = {
    name: 'kk',
    height: '1.88',
    running: function() {
        console.log('在跑步');
    }
}

Object.defineProperty(Foo.prototype, 'constructor', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: Foo
});

// 注意：通过第1种方式添加属性时，生成实例对象的语句可以写在属性添加前/后;第2种方式添加属性时，生成实例对象的语句必须写在属性添加后(内存指向问题)
var foo1 = new Foo();

console.log(foo1.name, foo1.height, foo1.constructor)

在这里插入图片描述

3.7、方案四——原型和构造函数结合（最终方案）

  • 属性还是挂载到自己的实例上面，保证自己实例属性的独立。（挂载到原型上的话后面的实例属性值会覆盖前面的）
function Person(name, age) {
    // 不可以这样绑定属性
    Person.prototype.name = name;
    Person.prototype.age = age;
}

var p1 = new Person('张三', 18);
var p2 = new Person('李四', 20);

console.log(p1.name); // 李四（'张三'被覆盖）
  • 把函数挂载到原型上

3.7.1、实现

function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 在原型上挂载函数
Person.prototype.running = function() {
    console.log(this.name + '在跑步~');
}

var p1 = new Person('张三', 18);
var p2 = new Person('李四', 20);

p1.running(); // 张三在跑步~
p2.running(); // 李四在跑步~

4、面向对象中的一些概念

4.1、JavaScript中的类和对象

当我们编写如下代码的时候，我们会如何来称呼这个Person呢？

  • 在JS中Person应该被称之为是一个构造函数；
  • 从很多面向对象语言过来的开发者，也习惯称之为类（在ES6之前，JS中是没有类这个概念的），因为类可以帮助我们创建出来对象p1、p1；
  • 如果从面向对象的编程范式角度来看，Person确实是可以称之为类的；
function Person() {

}

var p1 = new Person();
var p2 = new Person();

4.2、面向对象的三大特性

面向对象有三大特性：封装、继承、多态

  • 封装：编写类的过程称之为是一个封装的过程
  • 继承：1、重复利用一些代码（对代码的复用）；2、继承是多态的前提；
  • 多态：不同的对象在执行时表现出不同的形态

5、原型链

5.1、原型链概念

在这里插入图片描述

5.2、顶层原型——Object.prototype

  • 该对象有原型属性，但是它的原型属性已经指向的是null了，也就是说该对象已经是顶层原型了；
  • 该对象上有很多默认的属性和方法，如：toString()、valueOf()等；
var obj = {};

console.log(obj.__proto__); // [Object: null prototype] {}
console.log(Object.prototype); // [Object: null prototype] {}
console.log(obj.__proto__ === Object.prototype); //true

console.log(Object.prototype.__proto__ === null); // true

从上面的Object原型我们可以得出一个结论：Object是所有类的父类。

6、继承的实现方案

6.1、方案一——原型链继承

6.1.1、实现

// 父类的公共属性和方法
function Person() {
    this.name = 'why';
    this.friends = [];
}

Person.prototype.eating = function() {
    console.log(this.name + ' eating~');
}

// 子类独有的属性和方法
function Student() {
    this.sno = '111';
}

// 通过原型链实现继承
Student.prototype = new Person();

Student.prototype.studying = function() {
    console.log(this.name + ' studying~');
}

var stu = new Student();
console.log(stu.name); // why
stu.eating(); // why eating~

内存图

6.1.2、缺点

  1. 打印stu对象，继承的属性是看不到的；
console.log(stu); // Person { sno: '111' }
  1. 获取父类中的引用，修改引用中的值，会互相影响；
function Person() {
    this.name = 'why';
    this.friends = [];
}

...

Student.prototype = new Person();

...

var stu1 = new Student();
var stu2 = new Student();

// 重点1：获取引用，修改引用中的值，会互相影响
stu1.friends.push('11'); // 原因：get操作，会沿着原型链查找属性
console.log(stu2.friends); // ['11']

// stu1.friends = ['11']; // 不会影响stu2，但是赋予新值时操作很不方便
// stu1.friends = ['11', '22'];
// console.log(stu2.friends); // []

// 重点2：直接修改对象上的属性，是给本对象添加了一个新属性
stu1.name = 'zhangsna';
console.log(stu2.name); // why
  1. 在前面实现类的过程中都没有传递参数；

6.2、方案二——借用构造函数

6.2.1、实现

function Person(name, friends) {
    this.name = name;
    this.friends = friends;
}

Person.prototype.eating = function() {
    console.log(this.name + 'eating~');
}

function Student(name, friends, sno) {
    Person.call(this, name, friends);
    this.sno = sno;
}

Student.prototype = new Person();

Student.prototype.studying = function() {
    console.log(this.name + ' ' + 'studying~');
}

var stu1 = new Student('zhangsan', ['wangwu'], 111);
var stu2 = new Student('lisi', ['marry'], 222);
console.log(stu1); // Person { name: 'zhangsan', friends: [ 'wangwu' ], sno: 111 }
console.log(stu2); // Person { name: 'lisi', friends: [ 'marry' ], sno: 222 }

stu1.friends.push('xiaoming');
console.log(stu2.friends); // ['marry']

在这里插入图片描述

6.2.2、缺点

  1. Person函数至少会被调用两次；
  2. stu原型对象上会多出一些属性，但是这些属性是没有存在的必要的；

6.3、方案三——父类原型赋值给子类原型

6.3.1、实现

function Person(name, friends) {
    this.name = name;
    this.friends = friends;
}

Person.prototype.eating = function() {
    console.log(this.name + 'eating~');
}

function Student(name, friends, sno) {
    Person.call(this, name, friends);
    this.sno = sno;
}

Student.prototype = Person.prototype;

Student.prototype.studying = function() {
    console.log(this.name + ' ' + 'studying~');
}

var stu1 = new Student('zhangsan', ['wangwu'], 111);
console.log(stu1); // Person { name: 'zhangsan', friends: [ 'wangwu' ], sno: 111 }
stu1.eating(); // zhangsaneating~

6.3.2、缺点

后续在子类原型上添加的属性，会出现在父类上。从面相对象的思想来看，这是不对的。

Student.prototype.studying = function() {
    console.log(this.name + ' ' + 'studying~');
}
// { eating: [Function (anonymous)], studying: [Function (anonymous)] }
console.log(Person.prototype);

6.4、方案四——原型式继承（针对对象）

原型式继承函数

var obj = {
    name:' 张三',
    age: 18
};

// 目的：使当前函数返回的新对象的原型，指向传入的这个对象
// 方法1：最开始的实现方案
function createObject1(o) {
    function Fun() {}
    Fun.prototype = o;
    return new Fun();
}

// 方法2：Object.setPrototypeOf方法出现后
function createObject2(o) {
    var newObj = {};
    // 设置newObj的原型指向o
    Object.setPrototypeOf(newObj, o);
    return newObj;
}

// 方法3：es6后。Object.create原理跟上面的代码一样，只是进行了封装
var info = Object.create(obj);

// var info = createObject1(obj);
// var info = createObject2(obj);
console.log(info.__proto__); // { name: ' 张三', age: 18 }

6.5、方案五——寄生式继承（针对对象）

相当于是原型式继承跟工厂模式的一种结合。
寄生式继承函数

var pObj = {
    running: function() {
        console.log('running');
    }
}

function createStudent(obj, name) {
    var stuObj = Object.create(obj);
    stuObj.name = name;
    stuObj.studying = function() {
        console.log('studying');
    }
    return stuObj;
}

var stu = createStudent(pObj, '李四');
console.log(stu); // { name: '李四', studying: [Function (anonymous)] }
console.log(stu.__proto__); // { running: [Function: running] }

6.6、方案六——寄生组合式继承（最终方案）

6.6.1、实现

function Person(name, friends) {
    this.name = name;
    this.friends = friends;
}

Person.prototype.eating = function() {
    console.log(this.name + 'eating~');
}

function Student(name, friends, sno) {
    Person.call(this, name, friends);
    this.sno = sno;
}

Student.prototype = Object.create(Person.prototype);
Object.defineProperty(Student.prototype, 'constructor', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: Student
});

Student.prototype.studying = function() {
    console.log(this.name + ' ' + 'studying~');
}

var stu1 = new Student('zhangsan', ['wangwu'], 111);
console.log(stu1); // Student { name: 'zhangsan', friends: [ 'wangwu' ], sno: 111 }
stu1.eating(); // zhangsaneating~
console.log(Person.prototype); // { eating: [Function (anonymous)] }

6.6.2、优化

把实现原型继承的代码封装为一个公共方法：

// 公共方法
function inheritPrototype(SubType, SuperType) {
    // 兼容问题：Object.create可以换成之前写的其他实现方法
    SubType.prototype = Object.create(SuperType.prototype);
    Object.defineProperty(SubType.prototype, 'constructor', {
        enumerable: false,
        configurable: true,
        writable: true,
        value: SubType
    });
}

function Person(name, friends) {
    this.name = name;
    this.friends = friends;
}

Person.prototype.eating = function() {
    console.log(this.name + 'eating~');
}

function Student(name, friends, sno) {
    Person.call(this, name, friends);
    this.sno = sno;
}

inheritPrototype(Student, Person);

Student.prototype.studying = function() {
    console.log(this.name + ' ' + 'studying~');
}

var stu1 = new Student('zhangsan', ['wangwu'], 111);
console.log(stu1); // Student { name: 'zhangsan', friends: [ 'wangwu' ], sno: 111 }
stu1.eating(); // zhangsaneating~
console.log(Person.prototype); // { eating: [Function (anonymous)] }

7、Object上用于进行判断的方法的补充

7.1、hasOwnProperty方法

用于判断某个属性是否存在于当前对象上：

obj.hasOwnProperty(prop);

var obj = {
    name: '张三',
    age: 18
};

var info = Object.create(obj, {
    // 补充，第二个参数：给返回的新对象上添加自己的属性
    address: {
        value: '北京市',
        enumerable: true,
    }
});

console.log(info); // { address: '北京市' }
console.log(info.__proto__); // { name: '张三', age: 18 }

console.log(info.hasOwnProperty('address')); // true
console.log(info.hasOwnProperty('name')); // false

7.2、in操作符

不管某个属性是在当前对象上，还是存在于原型链上，都返回true：

prop in obj

var obj = {
    name: '张三',
    age: 18
};

var info = Object.create(obj, {
    // 第二个参数：给返回的新对象上添加自己的属性
    address: {
        value: '北京市',
        enumerable: true,
    }
});

console.log('address' in info); // true
console.log('name' in info); // true

7.3、instanceof

用于检测构造函数的prototype，是否出现在某个实例对象的原型链上。

实例对象 instanceof 构造函数

function inheritPrototype(SubType, SuperType) {
    // 兼容问题：Object.create可以换成之前写的其他实现方法
    SubType.prototype = Object.create(SuperType.prototype);
    Object.defineProperty(SubType.prototype, 'constructor', {
        enumerable: false,
        configurable: true,
        writable: true,
        value: SubType
    });
}

function Person() {

}

function Student() {

}

inheritPrototype(Student, Person);

var stu = new Student();

console.log(stu instanceof Student); // true
console.log(stu instanceof Person); // true
console.log(stu instanceof Object); // true

7.4、isPrototypeOf

用于检测某个对象，是否出现在某个实例对象的原型链上。

对象.inPrototypeOf(实例对象);

function Person() {

}
var p = new Person();
console.log(Person.prototype.isPrototypeOf(p));


var obj = {
    name: '李四',
    age: 20
}
var info = Object.create(obj);
console.log(obj.isPrototypeOf(info));

8、对象-函数-原型之间的关系

var obj = {
	name: 'why'
}
console.log(obj.__proto__);

// 对象里面是有一个__proto__对象：隐式原型对象

// Foo是一个函数，那么它会有一个显式原型对象：Foo.prototype
// Foo.prototype来自哪里？
// 答案：创建了一个函数，js引擎内部会自动生成该对象，Foo.prototype = { constructor: Foo }

// Foo是一个对象，那么它会有一个隐式原型对象：Foo.__proto__
// Foo.__proto__来自哪里？
// 答案：new Function()，Foo.__proto__ = Function.prototype
//  Function.prototype = { constructor: Function }

// 等价于：var Foo = new Function()
function Foo() {

}

console.log(Foo.prototype === Foo.__proto__); // false
console.log(Foo.prototype.constructor); // [Function: Foo]
console.log(Foo.__proto__.constructor); // [Function: Function]
console.log(Function.prototype === Function.__proto__); // true(特殊之处)

原型继承关系

长乐呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2022-05-06 深入JavaScript高级语法四——ES6(ES2015)
qq_41068717的博客
12-12 289
目录
十个高阶Javascript知识及用法
a1014981613的博客
04-18 229
今天给大家整理了十个Javascript的高级知识，希望对你有所帮助
深入理解JavaScript高级语法
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-02 319
本文将深入探讨JavaScript的高级语法，帮助读者更好地理解和应用这些语法特性。我们将详细讲解箭头函数、解构赋值、扩展运算符、Promise、async/await等高级语法，希望能够为读者提供全面的知识和实用的技巧。
2021-10-21 深入JavaScript高级语法（一）
qq_41068717的博客
01-18 928
javascript中的this指向
《javascript高级程序设计》,深入javascript高级语法
最新发布
chatgpt001的博客
10-15 137
这篇文章主要介绍了javascript高级程序设计和权威指南，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获，下面让小编带着大家一起了解一下。
深入 JavaScript 高级语法
阿城的博客
09-22 294
深入 JavaScript 高级语法
js-jsnacks-blocco-5:带对象的Javascript教程
05-27
7. **ES6的类与继承**：虽然JavaScript本质上是基于原型的，但ES6引入了类的语法糖，提供了一种更面向对象的编程风格。类可以通过`extends`关键字实现继承。 8. **访问器属性**：JavaScript允许定义getter和setter...
worldwindjava源码-javascript-oop:面向对象编程和面向对象JavaScript
06-05
中的面向对象编程 学习目标 使用构造函数生成特定类型的对象。 使用构造函数将属性附加到新对象。 回想一下在构造函数中定义方法的成本。 通过将自定义对象附加到原型来定义自定义对象的方法。 使用 ES6 类语法重构...
Learning-JavaScript：基本JavaScript语法和做法
02-21
- 构造函数和原型链是JavaScript实现面向对象编程的关键，如`new`关键字用于实例化对象。 5. **数组**： - JavaScript的数组是一种特殊的对象，可以存储多个值。例如：`var arr = [1, 2, 3];`。 - 数组提供了...
javascript 面向对象编程.pdf javascript 设计模式与开发实践.pdf
03-07
这两本书——"JavaScript 面向对象编程.pdf"和"JavaScript 设计模式与开发实践.pdf"将深入探讨这些主题。 面向对象编程在JavaScript中主要体现在三个方面：封装、继承和多态。封装是指将数据和操作数据的方法捆绑在...
JS面向对象编程——ES6 中class的继承用法详解
10-15
在JavaScript的ES6标准中，面向对象编程得到了显著的增强，引入了`class`语法糖，使得类的定义更加简洁且符合传统面向对象语言的习惯。本文将深入探讨ES6中的`class`继承及其相关操作技巧。 ### 基本介绍 在ES5中...
JavaScript高级教程（完整版）
12-09
JavaScript高级教程，完整详细的讲解了JavaScript
2022-01-18 深入JavaScript高级语法（二）
qq_41068717的博客
04-07 281
目录
JavaScript高级语法
code_J的博客
10-25 788
目录 一、Exception 1.异常概述 2.异常捕捉 3.异常抛出 二、JSON 1.JSON概述 2.JSON数据类型 (1)、JSON字符串 (2)、JSON数字 (3)、JSON对象 (4)、JSON数组 (5)、JSON布尔 (6)、JSONnull (7)、JSON字符串转JS对象 (8)、JS对象转JSON字符串 (8)、JSON PHP 三、AJAX 1.AJAX概述 2.XMLHttpRequest对象 3.get和post请求 四、Coo.
2022年JS新增小技巧
weixin_43867717的博客
04-20 471
1. null判断运算符?? ?？类似于管道运算符||，但是表现上更为严格。 const a = 0 || 1; // 1 const b = 0 ?? 1; // 0 区别： ||运算符左边为假时（包括：null， undefined， ‘’， 0， false等），返回右边的值，否则返回左边的值 ??运算符只有左边为null或者undefined时才返回右边的值，否则返回左边的值。 兼容性： 2. 链式判断运算符?. const res = res.data ? res.data.list : []
Object.defineProperty()方法的使用
背心的博客
07-31 300
Object.defineProperty()方法的使用
深入JavaScript高级语法-01-浏览器原理-v8引擎-js执行原理
coderlb的博客
04-14 851
浏览器原理-v8引擎-js执行原理 JavaScript的重要性 JavaScript是前端万丈高楼的根基 JavaScript在工作中至关重要 前端的未来依然是JavaScript 著名的Atwood定律 任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现 JavaScript应用越来越广泛 web开发 移动端开发 小程序端开发 桌面应用开发 后端开发 JavaScript让人迷惑的知识点 作用域 函数、闭包 面向对象 ES新特性 其他一系列知识 TypeS
前端--阶段笔记（三）JavaScript 高级
往前看
09-29 333
JS高级 JS AD Day 01 面向对象编程OOP：封装、继承、多态 使用功能来划分问题，而不是步骤。 类和对象 js中 对象是一组无序的相关属性和方法的集合，所有的事物都是对象。例如字符串，函数，数组等。 对象是由属性和方法组成的。 属性是事物的特征。 方法是事物的行为。 抽取对象公用的属性和行为组织成一个类。即抽象对象共有属性和行为封装成一个模板。 对类进行实例化，获取类的对象。 类，class，类抽象了对象的公共部分，泛指某一大类。 对象特指某一个，通过类实例化一个具体的对象。 1 .创建类 语法
javascript高级语法
weixin_30278237的博客
08-07 91
一、JavaScript对象 　　1、js对象简介 　　　　1.1 在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，在JavaScript程序大多数功能都是基于对象实现的。 　　　　1.2 js的内置对象分类 　　　　　　　 　　2、字符串对象（String） 　　　　2.1字符串对象的创建方式 　　　　　　...
第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt
11-14
其中涵盖的内容有History 对象、Location 对象、Screen 对象、Navigator 对象、Event 对象、Document 对象、Form 对象、Select / Option 对象等等。这些对象在JavaScript中可以用来操作和控制网页的各个方面，比如...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值