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

构造函数和原型
- 构造函数和原型
- - 概述
  - 构造函数
  - 构造函数的问题
  - 构造函数原型`prototype`
  - 对象原型`__proto__` （四个下划线）
  - `constructor` 构造函数
  - 构造函数，实例，原型对象三者之间的关系
  - 原型链
  - `Javascript` 的成员查找机制（规则)
  - 原型对象`this` 指向
  - 扩展内置对象
- 继承
- - `call()`
  - 借用构造函数继承父类型属性
  - 借用原型对象继承父类型方法
- ES5中的新增方法
- - ES5新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：
  - 数组方法
  - - 查询商品案例
  - 字符串方法
  - 对象方法

构造函数和原型

课程链接：

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

构造函数和原型

概述

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

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

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

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

对象字面量
new Object()

自定义构造函数

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

构造函数

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

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

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

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

在内存中创建一个空的对象
让this指向这个新的对象
执行构造函数里面的代码，给这个新对象添加属性和方法
返回这个新对象（所以构造函数里面不需要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('我唱歌');
}

问答？

原型是什么？

一个对象，我们称prototype 为原型对象
原型的作用是什么？

共享方法

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

对象原型`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` 的成员查找机制（规则)

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

原型对象`this` 指向

在构造函数中，里面的this 指向的是对象实例ldh
原型对象函数里面的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);

查询商品案例

把数据渲染到页面中
根据价格显示数据
根据商品名称显示数据

字符串方法

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

语法

str.trim();

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

对象方法

Object.keys() 用于获取自身对象的所有的属性
语法
```
Object.keys(obj);
```
- 效果类似for…in
- 返回一个由属性名组成的数组
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
});
```

JavaScript高级笔记_002_构造函数和原型相关推荐

JavaScript 高级笔记
JavaScript 高级笔记 1. 基础总结深入 1.1 数据类型 1.1.1 数据类型分类 1.1.2 数据类型判断 1.1.3 数据类型相关问题 1.2 数据.变量与内存 1.2.1 什么是数据 ...
JavaScript高级程序设计之什么是原型模式
原型模式: 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象(原型对象),而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法,如果说的容易点就是, ...
JavaScript高级笔记
1. 预编译 1.1 全局对象(GO对象) window js引擎会整合所有<script>标签中的内容, 产生window对象全局变量: 全局对象的一个属性全局函数: 全局对象的一个 ...
Javascript 面向对象中的构造函数和原型对象
先解释下原型.每一个Javascript对象(null除外)都和另外一个对象相关联,这个"另外一个对象"就是我们熟知的原型, 每一个对象都从原型继承属性和行为(方法). var a ...
JavaScript高级笔记
今日内容: 1. JavaScript:1. ECMAScript:2. BOM:3. DOM:1. 事件 DOM简单学习:为了满足案例要求 * 功能:控制html文档的内容 * 获取页面标签(元素) ...
JAVAWeb学习笔记2020/5/15——JavaScript高级笔记
第一章 DOM简单学习:为了满足案例要求 1. 功能:控制html文档的内容 2. 获取页面标签(元素)对象:Element document.getElementById("id值&quo ...
JavaScript高级第02天笔记
本资源由 itjc8.com 收集 JavaScript高级第02天笔记 1.构造函数和原型 1.1对象的三种创建方式–复习字面量方式 var obj = {}; new关键字 var obj = ...
《javascript高级程序设计》笔记：原型图解
文章直接从原型图解开始的,如果对一些概念不太清除,可以结合后面几节查看 1. 图解原型链 1.1 "铁三角关系"(重点) function Person() {}; var p = ...
JavaScript高级之构造函数和原型
1.1 概述在典型的 OOP 的语言中(如 Java),都存在类的概念,类就是对象的模板,对象就是类的实例,但在 ES6之前, JS 中并没用引入类的概念. ES6, 全称 ECMAScript 6 ...

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

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

构造函数和原型

构造函数和原型

概述

构造函数

构造函数的问题

构造函数原型`prototype`

对象原型`proto` （四个下划线）

`constructor` 构造函数

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

原型链

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

原型对象`this` 指向

扩展内置对象

继承

`call()`

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

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

ES5中的新增方法

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

数组方法

查询商品案例

字符串方法

对象方法

JavaScript高级笔记_002_构造函数和原型相关推荐

最新文章

热门文章

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

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

构造函数和原型

构造函数和原型

概述

构造函数

构造函数的问题

构造函数原型prototype

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

constructor 构造函数

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

原型链

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

原型对象this 指向

扩展内置对象

继承

call()

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

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

ES5中的新增方法

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

数组方法

查询商品案例

字符串方法

对象方法

JavaScript高级笔记_002_构造函数和原型相关推荐

最新文章

热门文章

构造函数原型`prototype`

对象原型`proto` （四个下划线）

`constructor` 构造函数

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

原型对象`this` 指向

`call()`