JS学习笔记2_面向对象

1.对象的定义

ECMAScript中,对象是一个无序属性集,这里的“属性”可以是基本值、对象或者函数

2.数据属性与访问器属性

  • 数据属性即有值的属性,可以设置属性只读、不可删除、不可枚举等等
  • 访问器属性是用来设置getter和setter的,在属性名前加上”_”(下划线)表示该属性只能通过访问器访问(私有属性),但并不是说添个下划线就把属性变成私有的了,这只是习惯约定的一种命名方式而已。访问器属性没什么用,原因如下:
    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);
    /*
    for(var attr in book){
      showLine(attr + ‘ = ‘ + book[attr]);
    }
    */

    高程中使用了上面的示例代码,原理是book对象的属性中_year是数据属性,而year是访问器属性,利用gettter和setter可以插入读写控制,听起来不错。

    但问题是_year和edition都是可枚举的,也就是说用for...in循环可以看到,而访问器属性year却是不可枚举的。应该公开的访问器不公开,却把应该隐藏的私有属性公开了。

    除此之外,这种定义访问器的方式并不是全浏览器兼容的,[IE9+]才完整支持,当然,也有适用于旧浏览器的方式(__defineGetter__()和__defineSetter__()),还是相当麻烦。

    总之,访问器属性没什么用

3.构造函数

function Fun(){} var fun = new Fun();其中Fun是构造函数,与普通函数没有任何声明方式上的区别,只是调用方式不同(用new操作符调用)而已

构造函数可以用来创建自定义对象,例如:

function MyClass(){
  this.attr = value;//成员变量
  this.fun = function(){...}//成员函数
}

与Java的类声明有些相似,但也有一些差异,比如this.fun只是一个函数指针,因此完全可以让它指向可访问的其它函数(如全局函数),但这样做会破坏自定义对象的封装性

4.函数与原型prototype

  1. 声明函数的同时也创建了一个原型对象,函数名持有该原型对象的引用(fun.prototype)
  2. 可以给原型对象添加属性,也可以给实例对象添加属性,区别是原型对象的属性是该类型所有实例所共享的,而实例对象的属性是非共享的
  3. 访问实例对象的属性时,先在该实例对象的作用域中查找,找不到才在原型对象的作用域中查找,因此实例的属性可以屏蔽原型对象的同名属性
  4. 原型对象的constructor属性是一个函数指针,指向函数声明
  5. 通过原型可以给原生引用类型(Object,Array,String等)添加自定义方法,例如给String添加Chrome不支持但FF支持的startsWith方法:
    var str = ‘this is script‘;
    //alert(str.startsWith(‘this‘));//Chrome中报错
    String.prototype.startsWith = function(strTarget){
      return this.indexOf(strTarget) === 0;
    }
    alert(str.startsWith(‘this‘));//不报错了

    注意:不建议给原生对象添加原型属性,因为这样可能会意外重写原生方法,影响其它原生代码(调用了该方法的原生代码)

  6. 通过原型可以实现继承,思路是让子类的prototype属性指向父类的实例,以扩大子类可访问的作用域,所以用原型链连接之后
    子类可访问的作用域
    = 子类实例作用域 + 子类原型作用域
    = 子类实例作用域 + 父类实例作用域 + 父类原型作用域
    = 子类实例作用域 + 父类实例作用域 + 父父类实例作用域 + 父父类原型作用域
    = ...

    最终父父...父类原型作用域被替换为Object.prototype指向的原型对象的作用域

    具体实现是SubType.prototype = new SuperType();可称之为简单原型链方式的继承

5.创建自定义类型的最佳方式(构造函数模式 + 原型模式)

实例属性用构造函数声明,共享属性用原型声明,具体实现如下:

function MyObject(){
  //实例属性
  this.attr = value;
  this.arr = [value1, value2...];
}
MyObject.prototype = {
  constructor: MyObject,//保证子类持有正确的构造器引用,否则子类实例的constructor将指向Object的构造器,因为我们把原型改成匿名对象了
  //共享属性
  fun: function(){...}
}

6.实现继承的最佳方式(寄生组合式继承)

function object(obj){//返回原型为obj的没有实例属性的对象
  function Fun(){}
  Fun.prototype = obj;
  return new Fun();
}
function inheritPrototype(subType, superType){
  var prototype = object(superType.prototype);//建立原型链,继承父类原型属性,用自定义函数object处理是为了避免作为子类原型的父类实例具有实例属性,简单地说,就是为了切掉除多余的实例属性,可以对比组合继承理解
  prototype.constructor = subType;//保证构造器正确,原型链会改变子类持有的构造器引用,建立原型链后应该再改回来
  subType.prototype = prototype;
}

function SubType(arg1, arg2...){
  SuperType.call(this, arg1, arg2...);//继承父类实例属性
  this.attr = value;//子类实例属性
}
inheritPrototype(SubType, SuperType);

具体解释见代码注释,这种方式避免了SubType.prototype = new SuperType();简单原型链的缺点:

  • 子类实例共享父类实例引用属性的问题(因为原型引用属性是所有实例共享的,建立原型链后父类的实例属性就自然地成了子类的原型属性)。
  • 创建子类实例时无法给父类构造函数传参

7.实现继承的最常用方式(组合继承)

把上面的inheritPrototype(SubType, SuperType);语句换成:

SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

这种方式的缺点是:由于调用了2次父类的构造方法,会存在一份多余的父类实例属性,具体原因如下:

第一次SuperType.call(this);语句从父类拷贝了一份父类实例属性给子类作为子类的实例属性,第二次SubType.prototype = new SuperType();创建父类实例作为子类原型,此时这个父类实例就又有了一份实例属性,但这份会被第一次拷贝来的实例属性屏蔽掉,所以多余。

时间: 2024-10-11 03:56:59

JS学习笔记2_面向对象的相关文章

JavaScript学习笔记2_面向对象

1.对象的定义 ECMAScript中,对象是一个无序属性集,这里的"属性"可以是基本值.对象或者函数 2.数据属性与访问器属性 数据属性即有值的属性,可以设置属性只读.不可删除.不可枚举等等 访问器属性是用来设置getter和setter的,在属性名前加上"_"(下划线)表示该属性只能通过访问器访问(私有属性),但并不是说添个下划线就把属性变成私有的了,这只是习惯约定的一种命名方式而已.访问器属性没什么用,原因如下: + 高程中使用了上面的示例代码,原理是book

JS学习笔记-OO疑问之封装

封装是面向对象的基础,今天所要学习的匿名函数与闭包就是为了实现JS的面向对象封装.封装实现.封装变量,提高数据.系统安全性,封装正是面向对象的基础. 匿名函数 即没有名字的函数,其创建方式为 function(){...} 单独存在的匿名函数,无法运行,可通过赋值给变量调用或通过表达式自我执行来实现运行. 1.赋值给变量为一般的函数使用方式 var run = function(){ return '方法运行中'; }; alert(run()); 2.通过表达式自我执行 (function(a

JS学习笔记-OO疑问之对象创建

问一.引入工厂,解决重复代码 前面已经提到,JS中创建对象的方法,不难发现,基本的创建方法中,创建一个对象还算简单,如果创建多个类似的对象的话就会产生大量重复的代码. 解决:工厂模式方法(添加一个专门创建对象的方法,传入参数避免重复) function createObject(name,age){ var obj =new Object(); //创建对象 obj.name = name; obj.age = age; obj.run = function(){ return this.nam

js学习笔记知识点

AJAX用法安全限制JSONPCORS面向对象编程创建对象构造函数原型继承class继承 AJAX 用法 AJAX不是JavaScript的规范,它只是一个哥们"发明"的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求 在现代浏览器上写AJAX主要依靠XMLHttpRequest对象: 'use strict'; function success(text) { var textarea = document.getE

JS学习笔记-数组

ECMAScript中没有提供类和接口等的定义,但它却是一门面向对象的语言,由于它能够通过其它 方式实现类似高级语言的面向对象功能,这些内容将在后面的文章中进行一步步的总结.此篇仅对JS中对象作简要说明,重点汇总一些类似于对象的数组的经常用法. 对象 创建 上篇提到创建对象的两种方式: 使用new运算符创建Object var obj = new Object(); 使用字面量方式创建 var   obj = {}; 这里值得注意的是在使用字面量(常量)创建Object时不会调用构造函数. 属性

JS学习笔记-事件绑定

一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了. 脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行.但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者. 2.需要限制重复绑定的情况 3.标准化event对象 二.现代事件绑定 DOM2级事件定义了两个方法用于添加.删除事件:addEventListener().removeEventLi

C++ Primer 学习笔记_73_面向对象编程 --再谈文本查询示例

面向对象编程 --再谈文本查询示例 引言: 扩展第10.6节的文本查询应用程序,使我们的系统可以支持更复杂的查询. 为了说明问题,将用下面的简单小说来运行查询: Alice Emma has long flowing red hair. Her Daddy says when the wind blows through her hair, it looks almost alive, like a fiery bird in flight. A beautiful fiery bird, he

C++ Primer 学习笔记_74_面向对象编程 --再谈文本查询示例[续/习题]

面向对象编程 --再谈文本查询示例[续/习题] //P522 习题15.41 //1 in TextQuery.h #ifndef TEXTQUERY_H_INCLUDED #define TEXTQUERY_H_INCLUDED #include <iostream> #include <fstream> #include <sstream> #include <vector> #include <set> #include <map&g

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.