web前端从零开始系列-10-Javascript面向对象

实例对象与new命令

  • JavaScript 语言的对象体系,不是基于“类”的,而是基于构造函数(constructor)和原型链(prototype)。
  • JavaScript 语言使用构造函数(constructor)作为对象的模板。所谓”构造函数”,就是专门用来生成实例对象的函数。
  • 为了与普通函数区别,构造函数名字的第一个字母通常大写。

构造函数的特点有两个。

  • 函数体内部使用了this关键字,代表了所要生成的对象实例。
  • 生成对象的时候,必须使用new命令。

new 命令 new命令的作用,就是执行构造函数,返回一个实例对象。 new 命令的原理

function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ params) {
  // 将 arguments 对象转为数组
  var args = [].slice.call(arguments);
  // 取出构造函数
  var constructor = args.shift();
  // 创建一个空对象,继承构造函数的 prototype 属性
  var context = Object.create(constructor.prototype);
  // 执行构造函数
  var result = constructor.apply(context, args);
  // 如果返回结果是对象,就直接返回,否则返回 context 对象
  return (typeof result === 'object' && result != null) ? result : context;
}

// 实例
var actor = _new(Person, '张三', 28);

new.target 可以判断函数调用的时候,是否使用new命令

Object.create() 创建实例对象

this 关键字

开发必备this

只要函数被赋给另一个变量,this的指向就会变。

this使用场合

  • 全局环境使用this,它指的就是顶层对象window。
  • 构造函数中的this,指的是实例对象。
  • 如果对象的方法里面包含this,this的指向就是方法运行时所在的对象。该方法赋值给另一个对象,就会改变this的指向。

使用注意

  • 由于this的指向是不确定的,所以切勿在函数中包含多层的this。
  • 避免数组处理方法中的 this
  • 避免回调函数中的 this

绑定 this 的方法

  • Function.prototype.call()
  • Function.prototype.apply()
  • Function.prototype.bind()

对象的继承

  • JavaScript 语言的继承不通过 class,而是通过“原型对象”(prototype)实现
  • JavaScript 继承机制的设计思想就是,原型对象的所有属性和方法,都能被实例对象共享。
  • JavaScript 规定,所有对象都有自己的原型对象(prototype)。
  • null没有任何属性和方法,也没有自己的原型。原型链的尽头就是null。
  • prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数

instanceof 运算符

运算符返回一个布尔值,表示对象是否为某个构造函数的实例。

构造函数的继承

  • 第一步是在子类的构造函数中,调用父类的构造函数。
  • 第二步,是让子类的原型指向父类的原型,这样子类就可以继承父类原型。

多重继承

JavaScript 不提供多重继承功能,即不允许一个对象同时继承多个对象。但是,可以通过变通方法,实现这个功能。

function M1() {
  this.hello = 'hello';
}

function M2() {
  this.world = 'world';
}

function S() {
  M1.call(this);
  M2.call(this);
}

// 继承 M1
S.prototype = Object.create(M1.prototype);
// 继承链上加入 M2
Object.assign(S.prototype, M2.prototype);

// 指定构造函数
S.prototype.constructor = S;

var s = new S();
s.hello // 'hello'
s.world // 'world'

模块

是实现特定功能的一组属性和方法的封装。

  • 模块写成一个对象,所有的模块成员都放到这个对象里面
  • 利用构造函数,封装私有变量
  • 封装私有变量:立即执行函数的写法
  • 模块的放大模式
  • 输入全局变量

Object 对象的相关方法

  • Object.getPrototypeOf方法返回参数对象的原型。这是获取原型对象的标准方法。
  • Object.setPrototypeOf方法为参数对象设置原型,返回该参数对象。它接受两个参数,第一个是现有对象,第二个是原型对象。
  • Object.create() 该方法接受一个对象作为参数,然后以它为原型,返回一个实例对象。该实例完全继承原型对象的属性。
  • Object.prototype.isPrototypeOf() 用来判断该对象是否为参数对象的原型。
  • Object.prototype.proto 实例对象的__proto__属性(前后各两个下划线),返回该对象的原型。该属性可读写。
  • Object.getOwnPropertyNames方法返回一个数组,成员是参数对象本身的所有属性的键名,不包含继承的属性键名。
  • 对象实例的hasOwnProperty方法返回一个布尔值,用于判断某个属性定义在对象自身,还是定义在原型链上。
  • in 运算符和 for...in 循环
  • 对象的拷贝

严格模式

  • 严格模式体现了 JavaScript 更合理、更安全、更严谨的发展方向。
  • 启用方法
  • 显式报错
  • 增强的安全措施
  • 向下一个版本的 JavaScript(ES6) 过渡

以上学习整理于 阮一峰教程 更详细内容可直接访问

彼特城博客
请先登录后发表评论
  • latest comments
  • 总共0条评论