JavaScript高级笔记_002_构造函数和原型

于 2022-03-31 23:55:46 发布
阅读量970 收藏 1
点赞数
分类专栏： JavaScript高级笔记 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51896272/article/details/123886982
版权

JavaScript高级笔记_002_构造函数和原型

构造函数和原型

课程链接：

https://www.bilibili.com/video/BV1KJ411x7X7?p=23

构造函数和原型

概述

在典型的OOP语言中（如Java)，都存在类的概念，类就是对象的模板，对象就是类的实例，但在ES6之前，JS中并没有引入类的概念

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

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

创建对象可以通过以下三种方式：

  1. 对象字面量

  2. new Object()

  3. 自定义构造函数

    function Star(uname, age) {
  this.uname = uname;
  this.age = age;
  this.sing = function() {
    console.log('我会唱歌');
  }
}

var ldh = new Star('刘德华', 18);
ldh.sing();

构造函数

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

在JS中，使用构造函数时要注意一下两点：

  1. 构造函数用于创建某一类对象，其首字母要大写
  2. 构造函数一定要和new一起使用才有意义

new** 在执行时会做四件事情：**

  1. 在内存中创建一个空的对象
  2. 让this指向这个新的对象
  3. 执行构造函数里面的代码，给这个新对象添加属性和方法
  4. 返回这个新对象（所以构造函数里面不需要return ）

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

  • 静态成员：在构造函数本身上添加的成员称为静态成员，只能有构造函数本身来访问
  • 实例成员：在构造函数内部创建的成员称为实例成员，只能由实例化的对象来访问
function Star(uname, age) {
  this.uname = uname;
  this.age = age;
  this.sing = function() {
    console.log('我会唱歌');
  }
}

var ldh = new Star('刘德华', 18);
ldh.sing();

构造函数的问题

构造函数方法很好用，但是存在内存浪费的问题

构造函数原型prototype

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

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

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

语法：

function Star(uname, age) {
  this.uname = uname;
  this.age = age;
}

Star.prototype.sing = function() {
  console.log('我唱歌');
}

问答？

  1. 原型是什么？

    一个对象，我们称prototype 为原型对象

  2. 原型的作用是什么？

    共享方法

一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们就放到原型对象身上

对象原型__proto__ （四个下划线）

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

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

方法的查找规则：首先看对对象身上是否有这个方法，如果有就执行这个对象上的方法，如果没有这个方法，因为__proto__ 的存在，就去构造函数原型对象prototype 身上去查找这个方法

constructor 构造函数

对象原型__proto__ 和构造函数prototype原型对象里面都有一个属性constructor 属性，constructor 我们称为构造函数，因为它指向构造函数本身

constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数

function Star(uname, age) {
  this.name = uname;
  this.age = age;
}
Star.prototype.sing = function() {
  console.log('我会唱歌');
};
Star.prototype.movie= function() {
  console.log('我会演电影');
}
var ldh = new Star();
console.log(ldh.__proto__.constructor);
console.log(Star.prototype.constructor);

很多情况下，我们需要手动的利用constructor 这个属性指回原来的构造函数

function Star(uname, age) {
  this.name = uname;
  this.age = age;
}
Star.prototype = {
  // 如果我们修改了原来原型对象，给原型对象赋值的是一个对象，则必须手动利用constructor指回原来的构造函数
  // 手动的利用constructor 这个属性指回原来的构造函数
  constructor : Star;
  sing : function() {
    console.log('我会唱歌');
  },
  movie : function() {
    console.log('我会演电影');
   }
}

var ldh = new Star();
console.log(ldh.__proto__.constructor);
console.log(Star.prototype.constructor);

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

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

原型链

在这里插入图片描述

Javascript 的成员查找机制（规则)

  1. 当访问一个对象的属性（包括方法）时，首先查找这个对象本身有没有该属性
  2. 如果没有就查找它的原型（也就是__proto__ 指向的prototype 原型对象）
  3. 如果还没有就查找原型对象的原型（Object 的原型对象
  4. 依次类推一直找到Object 为止（NULL)
  5. __proto__ 对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

原型对象this 指向

  1. 在构造函数中，里面的this 指向的是对象实例ldh
  2. 原型对象函数里面的this 指向的是实例对象ldh

扩展内置对象

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

Array.prototype.sum = function() {
  for(var i = 0; i < this.length; i++) {
    var sum = 0;
    sum += this[i];
  }
  return sum;
}

var arr = [1,2,3];
console.log(arr.sum());

数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {} ,只能是Array.prototype.xxx = function() {} 的方式

继承

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

call()

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

语法

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

参数：

  • thisArg：当前嗲用函数this的指向对象
  • arg1, arg2：传递的其他参数
function fn() {
  console.log('我想喝咖啡');
}

var o = {
  name = 'andy'
};
// 1 call()可以调用函数
fn.call();
// 2 call()可以改变函数的this的指向
fn.call(o); // 此时这个函数的this指向的就是o这个对象

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

核心原理：通过call() 把父类型的this 指向子类型的this ，这样就可以实现子类型继承父类型的属性

// 借用父构造函数继承属性
// 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('刘德华');
console.log(son);

借用原型对象继承父类型方法

// 借用父构造函数继承属性
// 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 = new Father();
Son.prototype.constructor = Son;

Son.prototype.exam = function() {
  conle.log('我要考试');
}

var son = new Son('刘德华');
console.log(son);

ES5中的新增方法

ES5新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：

  • 数组方法
  • 字符串方法
  • 对象方法

数组方法

迭代（遍历）方法：forEach(), map(), filter(), some() ,every();

forEach** 语法**

array.forEach(function(currentValue, index, arr));

参数：

  • currentValue ：数组当前项的值
  • index ：数组当前项的索引
  • arr ：数组对象本身

例子：

var arr = [1,2,3];
var sum = 0;
arr.forEach(function(value, index, array) {
  sum += value;
});

filter() ** 语法**

array.filter(function(currentValue, index, arr));
  • filter() 方法创建一个新的数组，新的数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组
  • 注意它返回的是一个新的数组
  • currentValue ：数组当前项的值
  • index ：数组当前项的索引
  • arr ：数组对象本身
var arr = [12, 24, 6, 77, 88];
var newArr = arr.filter(function(value, index, array) {
  // 筛选大于20的数
  return value >= 20;
});

some()** 语法**

array.some(function(currentValue, index, arr));
  • some() 方法用于检测数组中的元素是否满足指定条件。通俗点讲就是查找数组中是否有满足条件的元素
  • 注意它返回的是布尔值，如果查找到这和个元素，就返回true ,如果找不到就返回false
  • 如果找到第一个满足条件的元素，则终止循环，不再继续寻找
  • currentValue ：数组当前项的值
  • index ：数组当前项的索引
  • arr ：数组对象本身
var arr = [10, 3, 20, 33];
var flag = some(function(value) {
  // 判断数组中是否有大于等于20的数
  return value >= 20;
});
console.log(flag);
查询商品案例
  1. 把数据渲染到页面中
  2. 根据价格显示数据
  3. 根据商品名称显示数据

字符串方法

tirm() 方法会从一个字符串的两段删除空白字符

语法

str.trim();

tirm() 方法并不影响原字符串本身，它返回的是一个新的字符串

对象方法

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

    Object.keys(obj);
    • 效果类似for…in
    • 返回一个由属性名组成的数组

  2. Object.defineProperty() 定义对象中新属性或修改原有的属性
    语法

    Object.defineProperty(obj, prop, descriptor);
    • obj：必需。目标对象
    • prop：必需。徐定义或修改的属性的名字
    • descriptor：必需。目标属性所拥有的特性，以对象形式{}书写
      • value：设置属性的值，默认为undefined
      • writable：值是否可以重写。true|false，默认为false
      • enumerable：目标属性是否可以被枚举。true|false，默认为false
      • configurable：目标属性是都可以被删除或者是否可以再次修改特性ture|false，默认为false
    var obj = {
  id:1,
  pname:'小米',
  price:1999
};
// 添加
Object.defineProperty(obj, 'num', {
  value:1000
});

// 修改
Object.defineProperty(obj, 'price', {
  value:999
});

// 禁止修改 id的值
Object.defineProperty(obj, 'id', {
  writable:false;
});

Object.defineProperty(obj, 'address', {
  value:'中国山东蓝翔技校xx单元',
  writable:false,
  // 禁止遍历address属性
  enumerable:false,
  // 禁止删除address属性
  configurable:false
});
绒毛鸭鸭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绒毛鸭鸭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值