IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 笔记--javascript构造函数和原型,继承,ES6新增的方法 -> 正文阅读

[JavaScript知识库]笔记--javascript构造函数和原型,继承,ES6新增的方法

1. 构造函数和原型

1.1 概述

在典型的OOP的语言中(如java),都存在类的概念,对象是类的实例,但在ES6之前,
JS中并没有引入类的概念。

ES6,全称ECMAScript 6.0,2015.06发版。但是目前浏览器的javascript是ES5版本,大多数高版本的浏
览器也支持ES6,不过只实现了ES6的部分特性和功能。

在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和他们的特征。

创建对象可以通过以下三种方式:
	1. 对象字面量
	2. new Object()
	3. 自定义构造函数

2. 构造函数

构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总是与new一起使用,我
们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

new 在执行时会做到四件事情:
	1. 在内存中创建一个新的空对象。
	2. 让 this 指向这个新的对象。
	3. 执行构造函数里面的代码,给这个新对象添加属性和方法。
	4. 返回这个新对象(所以构造函数里面不需要 return )。

1.2 构造函数

javascript的构造函数中可以添加一些成员,可以在构造函数本身上添加,也可以在构造函数内部的this上添
加,通过这两种方式添加的成员,就分别称为静态成员和实例成员。

-静态成员:在构造函数本上添加的成员称为静态成员,只能由构造函数本身来访问。
-实例成员:在构造函数内部创建的对象称为实例成员,只能由实例化的对象来访问。
<script>
    // 构造函数中的属性和方法我们称为成员,成员可以添加
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
        this.sing=function(){
            console.log('我会唱歌!!');
        }
    }
    var ldh=new Star('刘德华',18);
    // 实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
    // 实例成员只能通过实例化的对象来访问
    console.log(ldh.uname);
    ldh.sing();
    // console.log(Star.uname);
    // 2. 静态成员 在构造函数本身上添加的成员,sex 就是静态成员
    Star.sex='男';
    // 静态成员只能通过构造函数来访问
    console.log(Star.sex);
    console.log(ldh.sex); // 不能通过对象来访问
</script>

1.3 构造函数的问题

构造函数方法虽然好用,但是存在浪费内存的问题。

在这里插入图片描述

1.4 构造函数原型 prototype

构造函数通过原型分配的函数是所有对象所共享的。

javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象,注意这个prototype就是一
个对象,把这个对象的所有属性和方法,都会被构造函数所拥有。

我们可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法。

	1. 原型是什么?
	一个对象,我们称为prototype为原型对象。
	2. 原型的作用是什么?
	共享方法。
<script>
    // 构造函数中的属性和方法我们称为成员,成员可以添加
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
        // this.sing=function(){
        //     console.log('我会唱歌!!');
        // }
    }

    var ldh=new Star('刘德华',18);
    var zxy=new Star('张学友',20);
    // 实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
    // 实例成员只能通过实例化的对象来访问
    console.log(ldh.uname);
    
    // console.log(Star.uname);
    // 2. 静态成员 在构造函数本身上添加的成员,sex 就是静态成员
    Star.sex='男';
    // 静态成员只能通过构造函数来访问
    console.log(Star.sex);
    console.log(ldh.sex); // 不能通过对象来访问

    Star.prototype.sing=function(){
        console.log('我会唱歌!!!');
    }
    console.log(ldh.sing===zxy.sing);
    console.dir(Star); // console.dir()可以显示一个对象所有的属性和方法。
    console.log(Star);
    ldh.sing();
    zxy.sing();
    // 一般情况下,我们的公共属性定义到构造函数里面,公共的方法我们放到原型对象身上
    
</script>

1.5 对象原型 proto

对象都会有一个属性_proto_指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数
prototype原型对象的属性和方法,就是因为对象有_proto_原型的存在。

- __proto__ 对象原型和原型对象prototype是等价的
- __proto__对象原型的意义就在于为对象的查找机制提供一个方法,或者说一条线,但是它是一个非标准属性,
因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype

在这里插入图片描述

<script>
    // 构造函数中的属性和方法我们称为成员,成员可以添加
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
        // this.sing=function(){
        //     console.log('我会唱歌!!');
        // }
    }
    Star.prototype.sing=function(){
        console.log('我会唱歌!!!');
    }
    var ldh=new Star('刘德华',18);
    var zxy=new Star('张学友',20);

    console.dir(Star); // console.dir()可以显示一个对象所有的属性和方法。
    console.log(Star);
    ldh.sing();
    // 一般情况下,我们的公共属性定义到构造函数里面,公共的方法我们放到原型对象身上
    console.log(ldh);
    console.log(Star.prototype);
    // 方法查找规则:首先先看ldh对象身上是否有sing方法,如果有就执行这个对象上的sing
    // 如果没有sing这个方法,因为有__proto__的存在,就去构造函数原型对象prototype身上去查找
</script>

1.6 constructor 函数

对象原型( __proto__ )和构造函数( prototype ) 原型对象里面都有一个属性constructor属性,constructor我们称
为构造函数,因为它指回构造函数本身。
constructor 主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。
<script>
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
    }
    // 很多情况下,我们需要手动的利用constructor 这个属性指回原来的构造函数
    Star.prototype={
        // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor
        // 指回原来的构造函数
        constructor:Star,
        sing:function(){
            console.log('我会唱歌!');
        },
        movie:function(){
            console.log('我会演电影!');
        }
    }
    var ldh=new Star('刘德华',18);
    var zxy=new Star('张学友',18);
    console.log(Star.prototype);
    console.log(ldh.__proto__);
    console.log(Star.prototype.constructor);
    console.log(ldh.__proto__.constructor);
</script>

1.7 构造函数,实例,原型对象三者之间的关系

在这里插入图片描述

1.8 原型链

在这里插入图片描述

<script>
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
    }
    Star.prototype.sing=function(){
        console.log('我会唱歌!!!');
    }
    var ldh=new Star('刘德华',18);
    // 1. 只要是对象,就有__proto__原型,指向原型对象
    console.log(Star.prototype);
    console.log(Star.prototype.__proto__===Object.prototype);
    // 2. 我们Star原型对象里面的__proto__原型指向的是 Object.prototype
    console.log(Object.prototype.__proto__);
    // 3. 我们Object.prototype原型对象里面的__proto__原型,指向的是null
</script>

1.9 javascript 的成员查找机制

	1. 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
	2. 若果没有就查找他的原型(也就是__proto__指向的prototype原型对象)。
	3. 如果还没有就查找原型对象的原型(Object的原型对象)。
	4. 以此类推一直找到Object为止(null)。
<script>
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
    }
    Star.prototype.sing=function(){
        console.log('我会唱歌!!!');
    }
    Star.prototype.sex='女';
    // Object.prototype.sex='男';
    var ldh=new Star('刘德华',18);
    ldh.sex='男';
    console.log(ldh.sex); // 男
    console.log(Object.prototype);
    console.log(ldh);
    console.log(Star.prototype);
</script>

1.10 原型对象this指向

<script>
    function Star(uname,age){
        this.uname=uname;
        this.age=age;
    }
    var that;
    Star.prototype.sing=function(){
        console.log('我会唱歌!!!');
        that=this;
    }
    var ldh=new Star('刘德华',18);
    // 1. 在构造函数中,里面的this指向的是对象实例 ldh
    ldh.sing();
    console.log(that===ldh);
    // 2. 原型对象函数里面的this指向的是实例对象 ldh
</script>

1.11 扩展内置对象

可以通过原型对象,对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。

注意:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype={},
只能是Array.prototype.xxx = function(){}的方式。
<script>
    // 原型对象的应用,扩展内置对象方法
    console.log(Array.prototype);
    Array.prototype.sum=function(){
        var sum=0;
        for(var i=0;i<this.length;i++){
            sum+=this[i];
        }
        return sum;
    }
    // 注意:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype={},
    // 只能是Array.prototype.xxx = function(){}的方式。
    // Array.prototype={
    //     sum:function(){
    //         var sum=0;
    //         for(var i=0;i<this.length;i++){
    //             sum+=this[i];
    //         }
    //         return sum;
    //     }
    // }
    var arr=[1,2,3];
    console.log(arr.sum());
</script>

2. 继承

ES6之前并没有给我们提供extends继承,我们可以通过构造函数+原型对象模拟实现继承,称为组合继承。

2.1 call()

调用这个函数,并且修改函数运行时this指向

fun.call (thisArg, arg1, arg2, ...)

-thsiArg:当前调用函数this的指向对象
-arg1,arg2:传递其他参数
<script>
    // call 方法
    function fn(x,y){
        console.log('我想喝手磨咖啡!!');
        console.log(this);
        console.log(x+y);
    }
    var o={
        name:'andy'
    };
    // fn();
    // // 1. call() 可以调用函数
    // fn.call();
    // 2. call() 可以改变这个函数的this指向,此时这个函数的this就指向了o这个对象
    fn.call(o,1,2);
</script>

2.2 借用构造函数继承父类型属性

核心原理:通过call() 把父类型的this指向子类型的this,这样就可以实现子类型继承父类型的属性。
<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname,age){
        // this 指向父构造函数的对象实例
        this.uname=uname;
        this.age=age;
    }
    // 2. 父构造函数
    function Son(uname,age,score){
        // this 指向子构造函数的对象实例
        Father.call(this,uname,age);
        this.score=score;
    }
    var son=new Son('刘德华',18,100);
    console.log(son);
</script>

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname,age){
        // this 指向父构造函数的对象实例
        this.uname=uname;
        this.age=age;
    }
    // 2. 子构造函数
    function Son(uname,age,score){
        // this 指向子构造函数的对象实例
        Father.call(this,uname,age);
        this.score=score;
    }
    // Son.prototype=Father.prototype;  这样赋值会出现问题,如果修改了子原型对象,
    // 父原型对象也会跟着一起变化
    Son.prototype=new Father();
    // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的路线
    Son.prototype.constructor=Son;
    // 这个是子构造函数专门的方法
    Son.prototype.exam=function(){
        console.log('孩子要考试!!');
    }
    var son=new Son('刘德华',18);
    console.log(son);
    console.log(Father.prototype);
    console.log(Son.prototype.constructor);
</script>

3. ES6中新增的方法

3.1 ES5 新增的方法

ES5 中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括:
- 数组方法
- 字符串方法
- 对象方法

3.2 数组方法

3.2.1 forEach() 迭代(遍历)数组

迭代(遍历)方法:forEach(), map(), some(), ever();
array.forEach(function(currentValue, index, arr))
- currentValue:数组当前项的值
- index:数组当前项的索引
- arr:数组对象本身
<script>
    // forEach() 迭代(遍历)数组
    var arr=[1,2,3];
    var sum=0;
    arr.forEach(function(value, index, array){
        console.log('每个数组元素:'+value);
        console.log('每个数组元素的索引号:'+index);
        console.log('数组本身:'+array);
        sum+=value;
    })
    console.log(sum);
</script>

3.2.2 filter() 筛选数组

迭代(遍历)方法:forEach(), map(), some(), ever();
array.forEach(function(currentValue, index, arr))
- filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组
- 注意它直接返回一个新数组
- currentValue:数组当前项的值
- index:数组当前项的索引
- arr:数组对象本身
<script>
    // filter() 筛选数组
    var arr=[12, 66, 4, 88];
    var newArr=arr.filter(function(value,index){
        return value>=20;
    });
    console.log(newArr);  // [66,88]
</script>

3.2.3 some() 查找数组中是否有满足条件的元素

迭代(遍历)方法:forEach(), map(), some(), ever();
array.forEach(function(currentValue, index, arr))
- some() 方法用于检测数组中的元素是否满足指定条件,通俗点查找数组中是否有满足条件的元素
- 注意它返回值是布尔值,如果查找到这个元素,就返回true,查找不到就返回false
- 如果找到第一个满足条件的元素,则终止循环,不在继续查找
- 注意它直接返回一个新数组
- currentValue:数组当前项的值
- index:数组当前项的索引
- arr:数组对象本身
<script>
    // some 查找数组中是否有满足条件的元素
    var arr1=['red','blue','pink'];
    var flag1=arr1.some(function(value){
        return value==='blue';
    });
    console.log(flag1);
    // 1. filter() 也是查找满足条件的元素,返回的是一个数组,而且是把所有满足条件的元素返回回来
    // 2. some() 也是查找满足条件的元素是否存在,返回的是一个布尔值,如果查找到第一个满足条件的元素
    // 就会终止循环
</script>

在这里插入图片描述

<body>
    价格:<input type="text" class="start">-<input type="text" class='end'>
    <button class="search_price">搜索</button>
    名称:<input type="text" class="named"><button class="search_pro">查询</button>
    <table>
        <tbody>

        </tbody>
    </table>
    
<script>
    // 查询商品案例
    // 利用新增数组方法操作数据
    var data=[{
        id:1,
        pname:'小米',
        price:3999
    },{
        id:2,
        pname:'华为',
        price:1899
    },{
        id:3,
        pname:'荣耀',
        price:4999
    },];
    // 1. 获取相应的元素
    var tbody=document.querySelector('tbody');
    var start=document.querySelector('.start');
    var end=document.querySelector('.end');
    var search_price=document.querySelector('.search_price');
    var search_pro=document.querySelector('.search_pro');
    var named=document.querySelector('.named');
    // console.log(tbody);
    // 2. 把数据渲染到页面中
    function setDate(arr){
        tbody.innerHTML='';
        arr.forEach(function(value){
        // console.log(value);
        var tr=document.createElement('tr');
        tr.innerHTML='<td>'+value.id+'</td><td>'+value.pname+'</td><td>'+
            value.price+'</td>';
            // console.log(tr);
            tbody.appendChild(tr);
    });
    }
    // 3. 根据价格查询商品
    // 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
    search_price.addEventListener('click',function(){
        // console.log(666);
        var newDate=data.filter(function(value){
            return value.price >= start.value && value.price <= end.value;
        });
        console.log(newDate);
    });
    // 4. 根据商品名称查找商品
    // 如果查询数组中唯一的元素,用some方法更合适,因为它找到这个元素,就不再进行循环,效率更高
    search_pro.addEventListener('click',function(){
        var arr=[];
        data.some(function(value){
            if(value.pname===named.value){
                arr.push(value);
                return true; // return后面必须写true
                // 在some里面遇到return true就是终止遍历,迭代效率更高
            }
        });
        // data.filter(function(value){
        //     if(value.pname===named.value){
        //         arr.push(value);
        //         return true; // filter 里面的return不会终止迭代
        //         
        //     }
        // });
        // 把拿到的数据渲染出来
        // console.log(arr);
        setDate(arr);
    })
</script>

</body>

3.3 字符串方法

trim() 方法会从一个字符串的两端删除空白字符串
str.trim()
trim()方法并不影响原字符本身,他返回的是一个新的字符串
<body>
    <input type="text"><button>点击</button>
    <div></div>
    <script>
        // trim() 方法去除字符串两侧空格
        var str='  an  dy  ';
        console.log(str);
        var str1=str.trim();
        console.log(str1);
        var input=document.querySelector('input');
        var btn=document.querySelector('button');
        var div=document.querySelector('div');
        btn.onclick=function(){
            var str=input.value.trim();
            if(str===''){
                alert('请输入内容');
            } else{
                console.log(str);
                console.log(str.length);
                div.innerHTML=str;
            }
        }
    </script>
</body>

3.4 对象方法

3.4.1 Object.keys() 用于获取对象自身所有的属性

Object.keys(obj)
- 效果类似 for...in
- 返回一个由属性名组成的数组
    <script>
        // 用于获取对象自身属性
        var obj={
            id:1,
            pname:'小米',
            price:1999,
            num:2000
        };
        var arr=Object.keys(obj);
        console.log(arr);
        arr.forEach(function(value){
            console.log(value);
        })
    </script>

3.4.2 Object.defineProperty() 定义对象新属性或修改原有的属性

Object,defineProperty(obj, prop, descriptor)
- obj:必需。目标对象
- prop:必需。需定义或修改的属性的名字
- descriptor:必需。目标属性所拥有的特性
Object.defineProperty() 第三个参数descriptor 说明:以对象形式()书写
- value:设置属性的值,默认为undefined
- writable:值是否可以重写。true | false 默认为false
- configurable:目标属性是否可以被删除或是否可以再次修改特性true | false 默认为false
<body>
    <script>
        // Object.defineProperty() 定义新属性或修改原有的属性
        var obj={
            id:1,
            pname:'小米',
            price:1999
        };
        // 1. 以前的对象添加和修改属性的方式
        // obj.num=1000;
        // obj.price=99;
        // console.log(obj);
        // 2. Object.defineProperty() 定义新属性或修改原有的属性
        Object.defineProperty(obj,'price',{
            value:9.9
        });
        Object.defineProperty(obj,'id',{
            // 不允许修改这个属性值
            writable:false,
        });
        obj.id=2;
        console.log(obj);  //id=1
        Object.defineProperty(obj,'address',{
            value:'中国山东蓝翔技校xx单元',
            // 如果值为false,不允许修改这个属性值,默认值也是false
            writable:false,
            // enumerable 如果值为false,则不允许遍历,默认值是false
            enumerable:false,
            // configurable 如果为false,则不允许删除这个属性,不允许修改在第三个参数里面的特性默认为false
            configurable:false
        });
        console.log(obj);
    </script>
</body>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-02 11:15:56  更:2021-09-02 11:17:08 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/28 21:32:20-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码