zoukankan      html  css  js  c++  java
  • JavaScript 类、构造函数、原型

    类、构造函数、原型  :本质均为函数
    利用的原理是:词法作用域调用对象作用域链  闭包  属性查找方式 
     
    设计和new运算符一起使用的函数叫做构造函数。
    构造函数的工作:初始化一个新创建的对象,设置在使用对象前需要设置的所有属性。
     
    注:new创建一个新的没有任何属性的对象,然后调用该函数(调用对象),把此对象作为this关键字的值
    传递给构造函数。
    构造函数通常是没有返回值,只是为这个this设置属性,但一个构造函数是允许返回一个对象值的,
    且如果这么做,返回的对象成为new表达式的值,作为this的值的对象会被抛弃。否则返回this这个对象。
     
    原型和继承
    一个对象的原型就是它的构造函数的prototype的值,所有的函数都有一个prototype属性,当其被定义时,prototype会自动创建
    并初始化,prototype属性的初始化值是一个对象,这个对象只带有一个属性:constructor,它指回到和原型相关的那个构造函数(
    这就是每个对象都有一个constructor属性的原因),
    为prototype对象添加的任何属性,都会成为构造函数所初始化的对象的属性。
     
    常规属性:在构造函数当中,使用this.属性  为其设置属性。方法也如此
    继承属性:通过为构造函数的prototype添加属性。方法也如此
     
    注:原型对象和构造 函数相关,并且,构造函数初始化的每个对象都确实从原型那里继承了完全相同的属性。
    这意味着,原型对象是设置方法和其它不变属性的理想地方。
     
    继承作为查找一个属性值的过程的一部分自动发生。
     
    首先,使用原型对象可以显著地减少每个对象所需的内存。(因为常规属性存于每个实例当中,都有一份拷贝,但继承属性只有在原型对象当中保存了一部分,并且其它实例共享这份内存)
    其次,即使在对象创建以后才添加到原型的属性,对象也可以继承它(得在查找该属性之前就已经添加,事实因为是词法作用域,所以只要定义了就能找到)
     
     
    读取和写入继承的属性(通过实例对象)
     
    由于一个原型对象可以被很多对象继承,JavaScript必须在读取和写入属性值 的时候,执行一种基本的不对称。
     
    1、当读取实例 对象的属性的时候,JavaScript首先检查o是否有此属性,如果没有,它接下来检查此实例对象的原型对象是否有此属性。这使得基于原型的继承能够奏效。
     
    2、当写入一个属性的值的时候,Javascript不会使用原型对象,只会为实例定义一个常规属性。
    (因为如果使用原型对象添加这个属性,会让其他所有实例都有这个属性)
     
    因此,属性继承只在读取属性值的时候发生,而当写入属性的时候不会发生。
     
    由于 原型属性是由一个类的所有对象共享的属性,通常只用它们来定义对于类中的所有对象来说都相同的属性,才显得有意义。
    这使得原型成为定义方法的理想工具。且如果改变这它,会影响到其它实例对象。
     
    扩展内建类型
    像String和Date  Function这样的内建的类,也是原型对象可对其扩展,
    注:只能对核心的JavaScript的本地对象起作用,当JavaScript嵌入到其它环境中,如一个web浏览器,它就访问另外的
    ‘宿主对象’ ,如:Document,这些宿主对象一般没有构造函数和原型对象,所以无法扩展。
    一般只有在实现缺少某个标准的方法时,才会扩展内建类型。用来实现兼容老版本等。
     
     
    在JavaScript中模拟类
    实例属性,实例方法
    类属性,类方法
     
    1、实例属性 实例方法
    是那些由构造函数创建和初始化的属性和方法
     
    放在构造函数中this创建的,以及放在prototype上定义的属性
     
    2、类属性 类方法
    类的每个属性 每个方法 都只有一份拷贝,(类本质也是一个对象(构造函数名))
    类名.属性名=值;
     
    3、私有属性(使用闭包来实现)
     
     
    超类和子类   可多级继承
     
    Object是所有内建为的超类。所有类都继承了Object的一些基本方法,
    这意味着原型对象继承了Object.prototype属性,基于原型的继承并不限于一个单个的原型对象,相反它包含了
    一个原型对象的链。
     
    因此查找属性时路径:对象本身,超类.prototype对象,Object.prototype对象
     
     1 //类 构造函数  原型对象  this代表调用对象 
     2 function R(w, h) {
     3     var date = new Date();
     4     this.width = w;
     5     this.height = h;
     6     this.createtime = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
     7 
     8 }
     9 R.prototype.area = function () {
    10     return this.width * this.height;
    11 }
    12 var o = new R(10, 20);
    13 console.log(o.createtime + ":" + o.area());

    输出:"2015-2-2 0:8:11:200"

     1 //类 构造函数  原型对象  this代表调用对象
     2 function R(w, h) {
     3     var date = new Date();
     4     this.width = w;
     5     this.height = h;
     6     this.createtime = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
     7     R.count++;
     8 }
     9 R.prototype.area = function () {
    10     return this.width * this.height;
    11 }
    12 //以上创建的都是实例属性和实例方法,以下为类属性和类方法
    13 R.count = 0;
    14 R.getCount = function () {
    15     return R.count;
    16 }
    17 
    18 var o = new R(10, 20);
    19 console.log("createtime:" + o.createtime + "
    area:" + o.area() + "
    R.count=" + R.getCount());
    20 var o2 = new R(20, 30);
    21 console.log("createtime:" + o2.createtime + "
    area:" + o2.area() + "
    R.count=" + R.getCount());

    输出:
    createtime:2015-2-2 0:9:14
    area:200
    R.count=1
    createtime:2015-2-2 0:9:14
    area:600
    R.count=2

     1 //私有属性(只能通过专门的方法才能读取和写入),使用了闭包原理,因为里面定义的函数被外部的全局对象引用了,
     2 //外部函数的调用对象不会被释放,w 和 h值一直维持最近一次的值,并且直到外部的引用消失,才会被释放内存
     3 function R(w, h) {
     4     this.getWidth = function () {
     5         return w;
     6     }
     7     this.getHeight = function () {
     8         return h;
     9     }
    10     this.setWidth = function (width) {
    11         w = width;
    12     }
    13     this.setHeight = function (height) {
    14         h = height;
    15     }
    16 }
    17 var o = new R(10, 20);
    18 alert(o.getWidth() * o.getHeight());
    19 o.setWidth(100);
    20 o.setHeight(200);
    21 alert(o.getWidth() * o.getHeight());

    输出:
    200
    20000

     
  • 相关阅读:
    一、vue常用指令
    win10安装和配置node
    win10安装和配置java8
    二、vue-cli4.5脚手架创建vue项目
    配置分布式事务实例:springcloud-Hoxton.SR1+springboot2.2.2+nacos1.3.2+seata1.2.0
    centos7安装frps_0.31.1
    centos7安装nginx1.18.0
    docker安装nexus3
    centos7防火墙的配置
    centos7使用Apache实现HTTP访问SVN资源库
  • 原文地址:https://www.cnblogs.com/tlxxm/p/4362043.html
Copyright © 2011-2022 走看看