Tracy JS 小笔记 - 对象，包装类，原型，原型链

最新推荐文章于 2022-08-31 23:01:27 发布
最新推荐文章于 2022-08-31 23:01:27 发布
阅读量88 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48702807/article/details/117473255
版权

对象

  • 引用值
  • var obj = {
    Name : "Tracy",
    Age : "18",
    Key : "Value",
    health : 100,
    smoke: function(){this.health --;}
    }
    注意，对象里的 smoke 方法，想要改变 health 值，也不能直接写 health, 而是要写 this.health 或者是 obj.health;
  • 对象的方法 obj.smoke();
    对象的属性有两种调用方法: obj.Name; obj['Name'];

  • 属性的增删改查

    • 对象增加 wife 属性: obj.wife = "小刘"; //原来有 wife 属性就是增加，没有就是赋值
    • 对象属性的删除 delete obj.Name

      但是，我们说 window.name 的两种情况

      • 一旦经历了 var 操作，所得出的属性，window, 这种属性叫作不可配置的属性
        不可配置的属性 delete 不掉
        var name = "abc"; window.name 只能查看和修改，删除不掉 (但是删除不会报错)
      • 一个属性是 window.name = "abc"; 添加出来的，就可以删除 delete window.num

       

    • 对象的属性修改 obj.Name = "Others";
    • 对象的属性查看 obj.Name //Tips: 如果打印对象没有的一个属性 比如 obj.abc 那么程序不会报错，而是输出 undefined
  • 对象的两种创建方法
    1. var obj = {} plainObject 对象字面量/对象直接量, 它也有原型，它的原型是 Object.prototype
    2. 构造函数
      1. 系统自带构造函数 Object(), Array(), Number()
        eg : var obj = new Object(); 完全等于 var obj = {} 没有任何区别 (所以硕对象 obj 的原型是 Object.prototype)
        然后自己加属性 obj.name = 'Tracy';

        公司里用的都是对象字面量来写，没有任何理由来用 “var obj = new Object();” 来创建对象,又麻烦 又没有用
      2. 自定义构造函数 (构造函数和正常函数没有任何区别)
        function abc(){} //构造函数
        var var abc1 = new abc(); //有 new 的话 就是生成了一个对象
        abc1.name = 'Tracy'; // 加属性

        为了不要给后面的人增加困难，所以我们构造函数的命名规则一定是大驼峰(首字母也大写)
        function Car(color){
        this.color = color;
        this.name = 'BMW';
        this.height = '1400';
        this.health = 100;
        this.run = function (){this.health-- }
        }

        var car1 = new Car('green');
    3. 构造函数内部原理 这个原理的一切前提都是 这个对象是用 new 来创建的
      1. 在执行体最前面上加一个隐式的 this 对象: var this{ __proto__: 函数名.prototype}
      2. 执行 this.XXX = ZZZ;
      3. 在执行体的最后一行 隐式的返回对象 this

        Tips: 由于这里是隐式放回对象，我们就可以捣乱了
        eg: function Person(name)
        {
        // var this{ __proto__: Person.prototype}
        this.name = name;
        this.age = 10;
        return {};
        //return this;
        }

        var a = Person("Tracy"); 此时输出 a 永远都等于 {} 无论我们赋值什么

        但是如果我们 return 123; 那么是不影响最后 return this 的，系统会自动忽略 return 123. 因为 new 一个对象的时候 返回值一定得是一个对象，不能是一个原始值，返回其他无效

    4. 除了 new 了一个对象里面 的 this 代表一个空对象之外，其他函数里面的new, 统统代表 windows 对象

包装类

  • var a = "abc"; var b = new String ("abc");
    都是字符串，但是 b 是字符串对象了
    a 是原始值， b 是引用值
    b 是可以加属性的 eg: b.Name = "Tracy";

    同理 new Number(); new Boolean();
    var num = new Number(123);
    var bol = new Boolean(true);
  • 原始值坚决不能有属性和方法，属性和方法是对象才可以有的

  • 包装类就是原始值调用属性的时候，隐式的中间系统帮忙转换的过程


    var num = 4;// 原始值 num 为 4

    num.leg = 3;//原始值是没有属性的，这里系统发现傻了吧唧的你给加属性了，系统没办法 就给隐式新 new 了一个对象 new Number(4).leg = 3; 新建对象后，系统马上将该对象删除

    consol.log (num.leg); // undefined
    这里系统发现你竟然又给原始值调用属性了，就有 new Number(4).leg 这里又新建了一个对象，和上一个对象已经没有什么关系了，所以这个对象的leg 属性是 undefined;
  • var arr = [1,2,3,4,5]; arr.length = 2; 此时 arr = [1,2]; 字符串是被截断了

    var str = "12345";
    str.length = 2;
    此时 str 仍然保持原来的值

    var str = "12345";
    str.length = 2; //系统发现，你是一个原始值，你没有 length 属性啊，就新建对象 new String("12345").length = 2 这个新建的对象确实被截断了, 然后马上删除该对象 //然后你打印，就发现，被改变的对象马上就删除了，和你原始值一毛钱关系都没有啊. console.log(str.length); //仍然是 4
  • undefined 和 null 是没有包装类的，它就是普通的原始值，没有任何方法和属性
    比如说 undefined.toString() 是会报错的

原型

  • 对我们人类来说， 人类的祖先就是原型
  • 原型是 function 对象的一个属性， 它定义了构造函数制造出来的对象的公共祖先。 通过该构造函数产生的对象，可以继承该原型的属性和方法。 原型也是对象
    //这里 Person.prototype = {} 就是原型, 它是一个空对象
    function Person(){} //构造函数特点，命名大驼峰
    var person1 = new Person();
    Person.prototype.name = "Tracy"; //祖先添加了属性，那它的所有孙子辈的就自动继承该属性
    此时 person1.name 也有值了， 因为它是祖先的孙子
    • 原型的增删改查
    • Person.prototype.newitem = "增，改，查"
    • delete Person.prototype.newitem 删
  • 原型的应用: 利用原型特点和概念，可以提取共有属性
    function Car(color){
    this.color = color;
    this.carName = "BWM";
    this.height = 100;
    this.leng = 420;
    }
    此时每次 new 一个新对象的时候，就会 新建一些一模一样的 height, leng 等固定的值，这就产生了冗余。 此时我们就想到要用 原型。
    Car.prototype.height = 100;
    Car.prototype.leng = 420;
    Car.prototype.carName = "BWM";
    function Car(color){
    this.color = color;

    }

    上面的三句原型可以简写为
    Car.prototype = {
    height : 100,
    leng : 420,
    carName : "BWM"
    }
  • constructor 对象如何查看对象的构造函数
    function Car(){}
    var car1 = new Car();
    car1.constructor; //constructor 是构造器的意思，返回的是构造这个对象的构造函数
    它其实是 Car 的原型里自带的属性，是继承来的属性. 返回的值是 "function Car(){}"

    constructor 是系统自动生成的，但是我们其实可以是手动改 constructor 的 比如：
    function Person(){}
    Car.prototype = {
    constructor : Person //它原来系统给默认写的是 Car
    }
    function Car(){}
    var car1 = new Car();
    此时 car1.constructor 值为 "function Person(){}",这招就叫作“认贼作父”
  • 隐式属性 __proto__ 对象如何查看原型
    系统自定义属性, 它里面放的就是原型，它把原型和类之间联系到了一起。 在对象自身找不到某属性的时候，它就通过这个 __proto__ 联系，来找原型中的属性
    eg: function Person(name)
    {// 新建对象的时候 隐式生成 var this{ __proto__: Person.prototype}
    this.name = name;
    this.age = 10;
    return {};
    //return this;
    }

    var a = Person("Tracy"); 此时输出 a 永远都等于 {} 无论我们赋值什么


    Person.prototype.name = "abc";
    function Person(){}
    function obj (){name:"tracy"}
    var person1 = new Person();
    此时 person1.name 值为 "abc"
    person1.__proto__ = obj; //把对象 person1 的原型手动给改了
    此时 person1.name 值为 "tracy"
    这招就叫作“认贼作祖父”
  • 一个陷阱
    Person.prototype.name = "abc";
    function Person(){}
    var person1 = new Person();
    Person.prototype.name = "funny"
    console.log(person1.name); //输出 funny
    Person.prototype = {
    name: "Tracy"
    };
    console.log(person1.name); //仍然输出 funny，想想这是为什么呢？

    举个例子
    var obj = {name:"a"};
    var obj1 = obj;
    obj = {name:"b"};
    此时 obj1.name 为 a; obj.name 为 b, 因为 obj = {name:"b"}; 的时候 obj 完全指向了不同的房间

    然后我们分析 Person.prototype.name = "abc";
    function Person(){
    //var this {__proto__: Person.prototype} //在 new 一个对象的时候 这里会有个隐式声明 this
    }
    var person1 = new Person();
    Person.prototype = {name: "Tracy"}; //注意这里是把它在 new 对象的下面
    console.log(person1.name); //输出 abc
    注意 "__proto__" 和 "Person.prototype" 就相当于两个对象的赋值, 而后来的 "Person.prototype = {name: "Tracy"};" 已经是说明了 其中一个对象 "Person.prototype" 指向了不同的房间，但是我们的 "__proto__" 仍然指向以前的房间，所以输出的值仍然是原来的 abc


    另一个骗局 Person.prototype.name = "abc";
    function Person(){}
    Person.prototype = {name: "Tracy"}; //注意这里是把它在 new 对象的上面
    var person1 = new Person();
    console.log(person1.name); //输出 Tracy
    这回我们在还没有 new 的时候就改了，所以就直接指向新的了

原型链

  • 原型本身自己也是有原型的，那么就形成了一个原型链
  • Grand.prototype.lastName = "Deng";
    function Grand(){}

    var grand1 = new Grand();

    Father.prototype = grand1;
    function Father(){}

    var father1 = new Father();

    Son.prototype = father1;
    function Son(){}

    var son1 = new Son();
    这个 son1 可以有它上面的链儿上的所有属性， 原型链的链接点就是 prototype

  • Object.prototype 是绝大多数对象的原型链的终端
    也就是说 ： 绝大多数的对象最终都会继承自 Object.prototype

    所以 Object.prototype.__proto__ 的值为 null

    例外就是: Object.create(null) 创建的对象, 这样创建出来的对象的原型就是 null

  • Object.create(原型)

    • 它是一种更加灵活的创建对象的方法，你可以自己指定原型
    • var obj = {name: "Tracy"}
      var obj1 = Object.create(obj);
      这样 obj 就是 obj1 的原型了
    • var obj = Object.create(null) ;创建的对象没有原型
      那么打印 document.write(obj) 的时候系统就会报错
      因为这个 document.write 方法是把里面的东西给加一个 toString() 方法，
      就像这样 document.write(obj.toString())
      而 obj 没有原型 也就不继承 Object.Prototype.toString 方法，因此报错
    • Object.create(原型, 特性)
      后面的这个特性，可以设置成可枚举性，只读，读写之类的，以后讲
  • 原型链方法的重写：
    如果原型里也有一个方法，我们的子类里也写了相同的方法，那么这叫做 “方法的重写” 既： 我覆盖了你原来的 方法。
    Eg: Person.prototype = {
    toString : function(){return "重写了Object.prototye 里的 toString() 方法";}
    }

    function Person(){}
    var person1 = new Person()
    person1.toString();

    Object.prototype.toString = function(){return "哈哈";}
    var a = {};
    a.toString(); //此时返回 哈哈， 因为我们把最底层的 toString 方法给覆盖了
    var a = "字符串"
    a.toString();//此时返回正常结果，因为 a.toString == new String("aa").toString, 而 String 类里是有自己的 toString 方法的，还没有到 Object.prototype 里取方法那一步

    我们也可以很任性把全局的都给改了
    • Object.prototype.toString = function(){return "哈哈";}
    • String.prototype.toString = function(){return "哈哈";}
    • Number.prototype.toString = function(){return "哈哈";}
    • Boolean.prototype.toString = function(){return "哈哈";}
    • Array.prototype.toString = function(){return "哈哈";}

  • This

    • aa.action(); // action 方法里面的this : 谁调用的这个方法，this 就指向谁
      因此 Demo:

      Person.prototype = {
      name : "a",
      sayName : function(){console.log(this.name);}
      }

      function Person(){
      this.name = "b";
      }

      var person1 = new Person();
      person1.sayName(); //值为 b, this 值向的是 person1
小小程序员——Tracy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 学习笔记
小熊同学的学习小屋
08-04 163
JavaScript 学习笔记
laravel-tracy：集成Nette Tracy调试器的Laravel软件包
02-02
composer require recca0120/laravel-tracy --dev 相反，您可以选择手动更新您的require块并运行composer update ： { " require-dev " : { " recca0120/laravel-tracy " : " ^1.8.14 " } } 在config/app.php...
Javascript 包装类
JSzilla
11-23 325
1. 原始值类型 Javascript的原始值类型有6种：number,string,boolean,undefined,null,symbol。 原始值和引用值的区别： 1. 原始值一般存储在栈内存，当它作为对象的属性时，原始值存储在堆内存，这是因为对象存储在堆内存。 2. 原始值没有属性和方法。 原始值的用途： number,string,boolean是有数学意义的原始值，用于运...
Tracy JS 小笔记 - 数据类型， typeof，类型转换
weixin_48702807的博客
06-01 528
数据类型： 原始值，引用值 原始值 ： 不可改变的原始值，是存储在栈里面 stack, 是个有底儿的箱子结构先进后出。 原始值 分为五大类 Number, Boolean, String, undefined, null var a = 1; 我们数据的类型天生就是浮点型，不是整形。 var a = "aa"; var a = 'aa'; var a = undefined; 它是一个类型; 这段话等于 var a; 表示一个变量只声明没有赋值。 var a = none; 表示站位，a 有值，
JavaScript--ES6学习笔记
double_debug的博客
11-29 1277
js笔记 目录 js笔记 快速入门 函数 箭头函数–Arrow Function 标准对象 Date RegExp JSON 面向对象编程 class继承 浏览器 浏览器对象 windows navigator screen document history 操作DOM 更新DOM 插入DOM insertBefore 练习 删除DOM 表单操作 操作文件 AJAX 安全...
javascript面向对象学习笔记（一）——继承
weixin_30752377的博客
07-07 137
原帖：http://www.cnblogs.com/Quains/archive/2011/04/10/2011917.html 最近在学习html5，玩了下canvas，发现js中很多的东西都不太记得了。翻了下笔记后发现还是去图书馆逛逛把，到借阅区找了我一直想看的《javascript design patterns》好好研读了个下午，读罢，顿时有种醍醐顿开的感觉（夸张了..），发现之前对j...
ES6笔记详细大全
m0_46691148的博客
05-22 420
一、Let和Const let声明变量，可重复定义 const定义常量，不可重复定义 产生块级作用域;可能会出现暂时性死区，在块级作用域外不能访问 二、解构赋值 对象解构 let person = { name: 'zangsan', age: 20, //hobby:undefined 一定要是undefined 默认值生效 没有改属性 默认值也生效 //hobby:null 默认值不生效 hobby为null } var { name, age, ...
JavaScript笔记整合(1)
yh18668197127的博客
03-28 251
1语法 2数据类型 3变量 4字符串操作,数组操作,对象操作 5控制台打印消息 6判断语句(和java一样) 7循环语句(和java一样,多的for in类似foreach)(for in遍历key,for of遍历value) 8Map和Set 9数据遍历(forEach和for of) 10函数 11变量作用域(全局,嵌套,变量提升,名字空间,常量,块级变量,解构赋值) ...
Javascript学习笔记
不求重复造轮子，但必须要知道轮子是怎么造的。
02-17 1914
首先先附上我看的这份教程吧！其次其次，附上js几个常见的调试的代码 console.log(“console.log”); console.info(“console.info”); console.debug(“console.debug”); console.warn(“console.warn”); console.error(“console.error”); 最
JavaScript高级程序设计
hello_helloworld的博客
08-31 7296
这是我对《JavaScript高级程序设计》的详细学习笔记，主要内容包括html中的JavaScript，变量基础，变量、作用域与内存，基本引用类型、集合引用类型，迭代器与生成器，对象、类与面向对象编程，函数，期约与异步函数，BOM,DOM,DOM扩展，DOM2和DOM3，事件......
Lil Tracy New Tab Theme-crx插件
04-06
在每个新标签页上都包括说唱歌手Lil Tracy的高清图像。 对于嘻哈和说唱爱好者。 在每个新标签页上都包括说唱歌手Lil Tracy的高清图像。 对于嘻哈和说唱爱好者。 请给我们评分！ 如果您觉得我们不值得5星级，请给我们...
Intro_OOJS:费城女孩的幻灯片开发 - 面向对象的 JavaScript 类介绍
06-01
在这个“Intro_OOJS:费城女孩的幻灯片开发 - 面向对象的JavaScript类介绍”中，Tracy Russell为我们提供了一次深入理解JavaScript面向对象编程的课程，特别是对于初学者或Girl Develop It费城班级的成员。...
Tracy0827#Myself-Repository#Linux（ubuntu20.04）下安装python3.7.5环境1
07-25
Linux（ubuntu20.04）下安装python3.7.5环境方案1，编译安装python环境sudo apt install -y gcc make b
Tracy JS 小笔记 - 日期对象，定时器
热门推荐
weixin_48702807的博客
06-02 1万+
日期对象 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6: 0 代表礼拜天，其他正常) getMonth() 从 Date 对象返回月份 (0 ~ 11)。 这个值 + 1 之后才是我们正常的月份 getTime()最常用，最有用的。 返回 1970 年 1 月 1 日至今的毫秒数,计算机的纪元时间。 它可以用来记录"时间戳"，比如查看一个循环执行了多长时间 var firstime = new Date().getTime(); for(var i = 0; i &lt.
得到字符串占多少 KB
weixin_48702807的博客
09-09 1914
getStringSize(text){ lettextlength=Buffer.byteLength(text,'utf8');//得到占多少bytes letsize=textlength/1024;//得到字符串占多少KB returnsize.toFixed(2); },
对象的深拷贝和浅拷贝
weixin_48702807的博客
04-24 932
1.浅拷贝 es6 新增方法 Object.assign const info = {name: "why", age: 18, friend: {name: "kobe"}}; const obj = Object.assign({}, info); info.name = "kobe"; console.log(obj.name); info.friend.name = "james"; console.log(obj.friend.name); 2.深拷贝
判断字符串是否以 endStr 为结尾
weixin_48702807的博客
03-29 764
String.prototype.endWith=function(endStr){ //判断字符串以 endStr 为结尾 let d=this.length-endStr.length; return (d>=0&&this.lastIndexOf(endStr)==d); }
Tracy JS 小笔记 - 正则表达式
weixin_48702807的博客
04-22 288
1 . 校验密码强度 密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。 ^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 2. 校验中文 字符串仅能是中文。 ^[\\u4e00-\\u9fa5]{0,}$ 3. 由数字、26个英文字母或下划线组成的字符串 ^\\w+$ 4. 校验E-Mail 地址 同密码一样，下面是E-mail地址合规性的正则检查语句。 [\\w!#$%&'*...
Tracy-Widom
最新发布
08-13
Tracy-Widom 是一个数学中的概念，它与随机矩阵理论相关。具体来说，Tracy-Widom 分布是一种极限分布，用于描述随机矩阵的最大特征值的统计性质。这个概念最初由Craig Tracy和Harold Widom在1994年的一篇论文中提出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值