首页 > 其他分享 >js高级

js高级

时间:2022-11-04 08:58:42浏览次数:98  
标签:对象 高级 js 原型 使用 var 构造函数 属性

面向对象

  • 面向过程的思维方式:就是把解决问题的关注点放到解决问题的每一个详细步骤上;
  • 面向对象的思维方式:就是把解决问题的关注点放到解决问题需要的一系列对象身上。
  • 面向对象是一种思维方式,和我们代码关系不大,它把解决问题的关注点放到了解决问题需要的一系列对象身上。
  • 面向对象是对面向过程的封装。

什么是对象:

  • 万物皆对象;
  • JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等;
  • 在 JavaScript 中,对象是拥有属性和方法的数据。
  • 在js中,键值对的组合就是对象,键值对有属性和方法。

属性和方法

  • 属性是与对象相关的值,用来描述对象的相关信息,也叫对象的特征;
  • 方法是能够在对象上执行的动作,对象的行为。

面向对象和面向过程的简单比较

  • 使用面向过程思维向body中添加div:
<script>
    var div = document.createElement("div");
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.backgroundColor = "red";
    document.body.appendChild(div);
</script>

  • 使用面向对象思维解决:
<script src="../jquery-1.11.1.min.js"></script>
<script>
    $("body").append("<div style='height:100px;width:100px;border:1px solid red;background-color: green'></div>");
</script>

函数封装

  • 优点:使代码复用性更高;
  • 缺点:
  • 全局变量污染, 解决方式:使用面向对象。
  • 代码结构不清晰,维护不方便: 在对象里面再将功能相近的函数放到一个对象里。
var person = {
    learn:function (course){
        console.log("我正在主修" +couse);
    }
    eat:function(meal){
        console.log("我正在吃"+meal);
    }
}
person.eat("午饭");

  • 使用对象进行封装后的优势:
  • 暴露在全局的只有一个对象名,不会造成全局变量污染;
  • 使用对象将代码进行功能模块的划分,有利于日后的维护。

JS高级讲义

面向对象的三大特性

  • 三大特性:封装、继承、多态。

  • 封装
    把一些属性和方法装到一个对象里面,让它们变得有意义。

  • 继承
    把别的对象的方法和属性拿过来用,就是继承

  • 混入式继承(最常用):for in

    <!--混入式继承:for in-->
    <script>
        var obj = {
            name:"刘德华",
            say:function () {
                console.log("世界,你好,我是刘德华!!!");
            }
        };

        var person = {};

        for (var k in obj) {
            //k可以获取到对象的每一个属性
            //obj[k]可以获取到对象的每一个属性的值
            //这里使用k给对象新增属性时候,不可以使用点语法;同时,这里获取属性的值时也不可以使用点语法
            person[k] = obj[k];
        }

        person.say();
    </script>

- 注:这里使用k给对象新增属性时候,不可以使用点语法;同时,这里获取属性的值时也不可以使用点语法。

  • 多态
    多态是在强类型语言中比较常用,JavaScript中没有相应的体现。
    使用父类的对象接受子类的对象(JavaScript中用不到);
    多态:父类的属性和方法可以供所有子类共享,但是父类不能访问子类的属性和方法,使用多态来隐藏不同

创建对象的四种方式

  • 使用字面量创建对象
   var o = {key:value, key:value...}

  • 只能创建一次性对象,用一个创建一个,不能复用,如果要创建多个对象,会造成代码冗余,资源浪费;

  • 使用内置构造函数创建对象

   var o = new Object();
   var o = new Array();

  • 创建出来的对象都是空的对象,利用对象的动态特性手动的去为对象添加属性和方法。造成代码重复。

  • 封装简单的工厂函数(不推荐使用)

function createObj(singer,song){
     var obj = new Object();
     obj.name = singer;
     obj.song = song;
     obj.sing = function (){
       console.log("让我来为你唱首歌);
     }
     return obj;
}
var obj1 = createObj("那英","默");
var obj2 = createObj("南金岭","逆流成河");

  • 自定义构造函数
    • 构造函数是用来初始化对象的(给对象新增成员),构造函数首字母要大写,以示区分;
    • new是用来创建对象的。
function Person(){
        //默认隐含操作,把new出来的Object赋值给this
        this.name = xxx;
        this.age = 20;
        this.study = function(){
            //code
        }
        //默认隐含操作:返回this
}
var p = new Person();
//如果调用的时候没有参数,小括号可以省略,可以使用var p = new Peron;

    0.构造函数名首字母要大写;
    1.构造函数一般和new关键字一起使用;
    2.构造函数返回值默认为新创建好的对象, 如果手动返回基本数据类型,不影响默认返回值,如果返回的是对象,那么新创建出来的对象将不会返回,取而代之的是return后面的对象。一般都不会去写这个return语句。

  • 构造函数与普通函数的区别:

    • 构造函数也属于函数的一种;
    • 构造函数是用来初始化对象的,一般和new关键字一块使用;
    • 构造函数里面的this指向使用new创建出来的对象;
    • 构造函数的返回值:默认返回我们创建
      出来的对象。
  • 构造函数(constructor)的执行步骤:
    1.使用new关键字创建对象;
    2.调用构造函数,隐含操作:将new创建出来的对象赋值给构造函数内的this;
    3.使用this给新创建出来的对象增加成员;
    4.默认返回新创建出来的这个对象(普通的函数,如果不写返回语句,会返回undefined)。

  • 对象是无序的键值对的集合。

  • js中提供了两个方法来调用其他对象的方法:

  • call;

  • apply。

<!--获取对象的具体类型-->
var typeStr = Object.prototype.toString.call(想要获取类型的对象);
//[object Array]
typeStr = typeStr.slice(8,-1);

  • 注:
function Animal(name,age,barkWay){
    this.name = name;
    this.age = age;
    this.bark = barkWay;
}
Animal("","",function (){
    console.log("我是张学友!!!");
});
window.bark();  //我是张学友!!!

  • 如果像使用正常函数一样使用构造函数,构造函数中的this将不再指向新创建出来的对象(因为根本就没有创建对象);
  • 此时构造函数中的this指向的是window全局对象;
  • 这时使用this给对象添加成员的时候,全部都添加到window上。

原型

构造函数存在问题

构造函数中的方法,每新创建一个对象的时候,该对象都会重新的创建一次这个方法,每个独享独占一个方法
但是该方法内容完全相同,所以造成资源浪费

1.解决办法1
将构造函数内的方法,进行提取,放在构造函数外面,并将该函数赋值给构造函数内的方法;
那么创建出来的对象,都会指向构造函数外面的这个函数,达到共享的目的;
此时使用这种方式写好的方法中的this指向的就是调用该方法的对象(谁调用指向谁)(默认的指向window);

问题:1.全局变量增多,造成全局变量污染;2.代码结构混乱,不容易维护

2.解决办法2
使用原型

原型是什么?

在构造函数创建出来的时候,系统会默认的创建并关联一个对象,这个对象就是原型,原型对象默认是空对象。
默认的原型对象中会有一个属性constructor指向该构造函数。

  • 如何访问构造函数的原型:构造函数.prototype。
  • prototype是构造函数的属性,和对象没有关系。

原型的作用

原型对象中的成员(属性和方法),可以被使用和它关联的构造函数创建出来的所有对象使用。
所以我们可以将构造函数中需要创建的函数,放到原型对象中存储,这样就解决全局变量污染及代码结构混乱的问题。

1\. 实例化:通过构造函数创建对象的过程。
2\. 实例:通过构造函数实例化出来的对象就是该构造函数的一个实例。
3\. 说实例的时候,一定要指定对应的构造函数:xxx对象是xxx构造函数的实例。

原型对象的使用

1\. 构造函数.prototype;
2\. 使用对象的动态特性,为原型对象添加成员(添加成员较少时候推荐使用);
3\. 直接替换原型对象(添加成员比较多的时候推荐使用)。

注意事项:
    直接替换原型对象,会导致替换之前创建的对象的原型和替换之后创建的对象的原型不是同一个。

原型的使用该注意事项

1.使用对象访问属性和方法的时候,会先在对象中查找,如果找到了就直接使用;如果没有找到,就去原型中查找。如果原型中还没有,如果是属性,就是undefined,如果是方法,就会报错。

2.使用对象设置属性的时候,只会在对象本身中查找,不会去原型中查找,如果在对象本身中没有找到这个属性,则给该对象新增一个属性,如果在对象中有这个属性,修改这个属性;

3.如果在原型对象中有引用类型的属性,那么使用对象进行修改该属性内容,则其他所有跟这个原型对象相关的对象都会受到影响;

4.一般情况下不会将属性添加到原型对象中,只会将需要共享的方法,添加到原型对象中。

__proto__
  • 通过构造函数访问原型对象:Person.prototype;
  • 通过对象访问原型对象:p.__proto__;
    1.这个属性不是标准属性,所以存在通用性问题;
    2.为了保证通用性,一般不推荐使用这个属性;
    3.调试的时候,可以使用这个属性;
    4.这个属性是原型中的属性。
constructor
  • 原型对象在创建出来的时候,会默认的有一个constructor属性,指向对象的构造函数;

  • 通过对象访问构造函数:p.constructor('','');,相当于直接使用Person('','');

  • 替换原型时候的注意事项:
    在新替换的原型中,constructor属性会变成Object,会影响三角结构关系的合理性;
    so,在新替换的原型中,为了保证整个构造函数---原型---对象之间的合理性,应手动添加constructor属性,赋值为关联的构造函数(constructor: Person)。

Person.prototype = {
    constructor : Person
};

标签:对象,高级,js,原型,使用,var,构造函数,属性
From: https://www.cnblogs.com/Sultan-ST/p/16856515.html

相关文章

  • js 树的各种骚操作,生成树,父子链,树推平
    js生成树结构1、假树,利用共享内存实现,非真遍历,这个是一种比较直观的写法letlist=[{id:1,name:100},{id:11,name:101,pid:1},{id:11......
  • 【JS基础】关于JS能表示的最大精度的问题
    看了好多文章,我还是比较认可这位博主的说法:https://www.codercto.com/a/107226.html本文只是自己做记录,是篇水文,大家可以直接访问上面链接哦~根据 IEEE754 标准,有......
  • SOLIDWORKS插件SolidKits高级BOM之批量写入模型属性
    一般情况下,我们在做设计时,可能都是在三维设计完成之后才去添加模型的属性信息,这部分工作就需要我们一个一个打开模型去做,也是很繁琐的一项工作。因此批量写属性的工具就变......
  • JS(二)
    1.DOM1.1改变HTMLHTMLDOM允许JavaScript改变HTML元素的内容。可用于直接向HTML输出流写内容。document.getElementById("").innerHTML=新的HTML用于修改变......
  • 用Nodejs 实现一个简单的 Redis客户端
    目录0.写在前面1.背景映入2.数据库选择3.NodejsTCP连接3.代码编写4.实验5.wireshark抓包分析6.杂与代码0.写在前面大家如果有去看过nodejs所支持的官方库的......
  • 《ASP.NET Core技术内幕与项目实战》精简集-高级组件4.3:请求数据校验
    本节内容,涉及到8.3(P269-P272),以WebApi说明为主。主要NuGet包:内置命名空间:System.ComponentModel.DataAnnotationsFluentValidation.AspNetCore(数据检验框架)  一、请......
  • nodejs 密码加密
    1.新建了一个setPassword.js文件constcrypto=require("crypto");///导入加密模块functionsetPassword(pwd){letpassword=`${pwd}xxx`//加入一段特定字符......
  • JS中的pipe原理
    学习reduce()时遇到一个练习“功能型函数管道”,对于代码中的pipe不能理解,类似于下面这一行代码,信息量很丰富,有es6中的扩展运算符,箭头函数,reduce()方法。constpipe=(........
  • js基础01
    ExerciseTest01严格检查模式strict'usestrict';//预防js的随意性导致产生的一些问题,必须放在第一行leti=1;//局部变量建议都用let定义数据类型数......
  • 解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at ‘file:///D:/WebP
     解决本地浏览器运行项目时的跨域问题-AccesstoXMLHttpRequestat'file:///D:/WebPracties/xxxxxx/data/funData.json问题描述解决办法一解决办法二解决方法三问题描......