javaScript 高级02 原型对象、原型链、继承、ES5的一些方法

2024-01-22 04:20
文章标签 java 方法 02 script 对象 高级 继承 原型 es5

本文主要是介绍javaScript 高级02 原型对象、原型链、继承、ES5的一些方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

javaScript 高级02

1. 构造函数和对象原型

1.1 对象的三种创建方式–复习

  1. 字面量方式

var obj = {};

  1. new关键字

var obj = new Object();

  1. 构造函数方式

function Person(name,age){
this.name = name;
this.age = age;
}
var obj = new Person(‘zs’,12);

1.2静态成员和实例成员

1.2.1实例成员

实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age sing() 就是实例
成员,实例成员只能通过实例化的对象来访问

function Star(uname, age) {this.uname = uname;this.age = age;this.sing = function() {console.log('我会唱歌');}
}
var lsj = new Star('刘三姐', 18);
console.log(lsj.uname);//实例成员只能通过实例化的对象来访问

1.2.2 静态成员

静态成员 在构造函数本身上添加的成员 如下列代码中 sex 就是静态成员,静态成员只能
通过构造函数来访问

function Star(uname, age) {this.uname = uname;this.age = age;this.sing = function() {console.log('我会唱歌');}
}
Star.sex = '男';
var ldh = new Star('刘德华', 18);
console.log(Star.sex);//静态成员只能通过构造函数来访问

1.3 构造函数的问题

构造函数本身方法很好用，但是存在浪费内存的问题。在使用属性时基本没什么变化，但是在方法身上就存在着浪费内存的问题了，每使用构造函数创建一个使用了构造函数方法的对象，就会多开辟一块空间来存放一个function(){}

1.4 构造函数原型prototype

构造函数通过原型分配的函数是所有对象所共享的。
JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。
我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可
以共享这些方法。

function Star(uname, age) {this.uname = uname;this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');    
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
ldh.sing();//我会唱歌
zxy.sing();//我会唱歌

1.5 对象原型

对象都会有一个属性 proto 指向构造函数的 prototype 原型对象，之所以我们对象
可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 proto 原型
的存在。
__proto__对象原型和原型对象 prototype 是等价的
__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象
prototype
在这里插入图片描述

<script>function Star(uname, age) {this.uname = uname;this.age = age;}Star.prototype.sing = function() {console.log('我会唱歌');}var ldh = new Star('刘德华', 18);var zxy = new Star('张学友', 19);ldh.sing();console.log(ldh); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototypeconsole.log(ldh.__proto__ === Star.prototype);// 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing// 如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法</script>

1.6 constructor构造函数

对象原型（ proto）和构造函数（prototype）原型对象里面都有一个属性
constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。
constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来
的构造函数。
一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数如:

 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 zxy = new Star('张学友', 19);
console.log(zxy)

1.7 原型链

每一个实例对象又有一个proto属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有proto属性，这样一层一层往上找就形成了原型链。

在这里插入图片描述

1.8 原型链和成员的查找机制

基于原型链的存在，当我们访问一个对象的属性（包括方法）时，首先会查找这个对象自身有没有该属性。如果没有就查找它的原型（也就是 __proto__指向的prototype 原型对象）。
如果还没有就查找原型对象的原型（Object的原型对象）。
依此类推一直找到 Object 为止（null）。
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

1.9 原型对象中的this指向

构造函数中的this和原型对象的this,都指向我们new出来的实例对象。还是那句话，谁调用就指向谁。

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
console.log(that === ldh);//true
// 2.原型对象函数里面的this 指向的是 实例对象 ldh

1.11 通过原型为数组扩展内置方法

Array.prototype.sum = function() {var sum = 0;for (var i = 0; i < this.length; i++) {sum += this[i];}return sum;};//此时数组对象中已经存在sum()方法了  可以始终 数组.sum()进行数据的求和

2. 继承

2.1 call()

call() 可以调用、同时也可以修改对象 this 的指向，使用call() 时 参数一 就是要修改的this指向对象，如有参数用逗号隔开。

  function fn(x, y) {console.log(this);console.log(x + y);
}var obj = {name: 'andy'  };fn.call(obj , 1, 2);//调用了函数此时的this指向了对象obj

2.2 子构造函数继承父构造函数中的属性

  1. 先定义一个父构造函数
  2. 再定义一个子构造函数
  3. 子构造函数继承父构造函数的属性(使用call方法)
// 1. 父构造函数function Father(uname, age) {// this 指向父构造函数的对象实例this.uname = uname;this.age = age;}// 2 .子构造函数
function Son(uname, age, score) {// this 指向子构造函数的对象实例3.使用call方式实现子继承父的属性Father.call(this, uname, age);this.score = score;
}
var son = new Son('刘德华', 18, 100);
console.log(son);

2.3 借用原型对象继承方法

// 1. 父构造函数
function Father(uname, age) {// this 指向父构造函数的对象实例this.uname = uname;this.age = age;
}
Father.prototype.money = function() {console.log(100000);};// 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, 100);console.log(son);

在这里插入图片描述

3. ES5新增方法

3.1 数组方法 forEach 遍历数组

 arr.forEach(function(value, index, array) {//参数一是:数组元素//参数二是:数组元素的索引//参数三是:当前的数组})//相当于数组遍历的 for循环 没有返回值

3.2 数组方法 filter 过滤

var arr = [12, 66, 4, 88, 3, 7];var newArr = arr.filter(function(value, index,array) {//参数一是:数组元素  //参数二是:数组元素的索引//参数三是:当前的数组return value >= 20;});console.log(newArr);//[66,88] //返回值是一个新数组

3.3 数组方法 some 查找

some 查找数组中是否有满足条件的元素var arr = [10, 30, 4];var flag = arr.some(function(value,index,array) {//参数一是:数组元素//参数二是:数组元素的索引//参数三是:当前的数组return value < 3;});
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

3.4 筛选商品案例

  1. 定义数组对象数据
var data = [{id: 1,pname: '小米',price: 3999}, {id: 2,pname: 'oppo',price: 999}, {id: 3,pname: '荣耀',price: 1299}, {id: 4,pname: '华为',price: 1999}, ];
  1. 获取元素
        var tbody = document.querySelector('tbody');var search_price = document.querySelector('.search-price'); // 查找按钮var start = document.querySelector('.start'); // 最小价var end = document.querySelector('.end'); // 最高价var product = document.querySelector('.product'); // 搜索框var search_pro = document.querySelector('.search-pro'); // 搜索按钮
  1. 使用forEach 循环遍历数组数据并动态添加渲染到页面中
data.forEach(function(value) {var tr = document.createElement('tr');tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname +
'</td><td>' + value.price + '</td>';tbody.appendChild(tr);});
  1. 根据价格筛选数据
    4.1 将筛选出来的数据重新渲染到表格中，渲染数据的逻辑封装
function setDate(mydata) {// 先清空原来tbody 里面的数据tbody.innerHTML = '';mydata.forEach(function(value) {var tr = document.createElement('tr');tr.innerHTML = '<td>' + value.id + '</td><td>' +
value.pname + '</td><td>' + value.price + '</td>';tbody.appendChild(tr);});}

4.2 为搜索按钮绑定点击事件，筛选用户输入的价格区间内的数据，然后渲染到表格中

search_price.addEventListener('click', function() {var newDate = data.filter(function(value) {//start.value是开始区间//end.value是结束的区间return value.price >= start.value && value.price <=
end.value;});console.log(newDate);// 把筛选完之后的对象渲染到页面中setDate(newDate);});
  1. 根据商品名称搜索商品
    此举与筛选价格区间相差不大，但是这里是搜索单一的数据做比较，所以使用 some
search_pro.addEventListener('click', function() {var arr = [];data.some(function(value) {if (value.pname === product.value) {// console.log(value);arr.push(value);return true; // return 后面必须写true }});// 把拿到的数据渲染到页面中setDate(arr);
})

3.5 some 和 forEach 区别

如果查询数组中唯一的元素 , 用some方法更合适,在some 里面 遇到 return true 就
是终止遍历 迭代效率更高
在 forEach 里面 return 不会终止迭代

3.6 trim() 方法去除字符串两端的空格

var str = '   hello   '
console.log(str.trim()）  //hello 去除两端空格
var str1 = '   he l l o   '
console.log(str.trim()）  //he l l o  去除两端空格

3.7 获取对象的属性名

Object.keys(对象) 获取到当前对象中的属性名 ，返回值是一个数组

var obj = {id: 1,pname: '小米',price: 1999,num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id，pname,price,num]

3.8 Object.defineProperty

Object.defineProperty设置或修改对象中的属性

Object.defineProperty(对象，修改或新增的属性名，{
value:修改或新增的属性的值,        
writable:true/false,//如果值为false 不允许修改这个属性值        
enumerable: false,//enumerable 如果值为false 则不允许遍历        configurable: false  //configurable 如果为false 则不允许删除这个属性
属性是否可以被删除或是否可以再次修改特性
})

这篇关于javaScript 高级02 原型对象、原型链、继承、ES5的一些方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/631829。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2