JS(JavaScript)
一.原型
1.概括
- 原型是什么
Function对象包含数学方法的函数，函数定义在protoype属性，初始值为一个空对象
原型的属性和方法不会影响函数自身的属性和方法
// Function类型的属性 -> 所有函数都具有的属性
console.log(Function.prototype);
// 定义函数
function fn(){
console.log('this is function');
}
// 原型的默认值是空对象
console.log(fn.prototype);
// 函数包含构造函数 -> 所有引用类型其实都是构造函数
console.log(Number.prototype);
console.log(Object.prototype);
var result = Object.getOwnPropertyDescriptor(Object.prototype, 'constructor');
console.log(result);- 获取原型
通过两种方式，来设置共存的属性和方法
构造函数的prototype属性
Object对象的getPrototype
function fn(){
console.log('this is function');
}
// 使用访问对象的属性语法结构
console.log(fn.prototype);
console.log(fn['prototype']);
// Object类型提供getPrototypeOf()方法
console.log(Object.getPrototypeOf(fn));- 原型的属性和方法
通过一下两种方式
单独定义原型的属性和方法
直接型定义个新对象
function fn(){
console.log('this is function');
}
// 变量proto也是一个空对象
// var proto = fn.prototype;
// 新增属性或方法
// proto.name = '犬夜叉';
fn.prototype.name = '犬夜叉';
console.log(fn.prototype);
// defineProperty()
Object.defineProperty(fn.prototype, 'age', {
value : 18,
enumerable : true
});
console.log(fn.prototype);2.原型属性
- 自有属性与原型属性
自有属性；对象引用增加属性，独立的属性函数本身的属性
原型属性；通过新增属性和方法并定义原型的属性
// 定义构造函数
function Hero(name){
// 构造函数本身的属性 -> 自有属性
this.name = name;
this.sayMe = function(){
console.log('this is function');
}
}
// 通过构造函数Hero的prototype新增属性或方法
// 通过原型所定义的属性 -> 原型属性
Hero.prototype.age = 18;
/*
通过构造函数Hero创建对象时
* 不仅具有构造函数的自有属性
* 还具有构造函数的原型属性
*/
var hero = new Hero('犬夜叉');
console.log(hero.name);// 犬夜叉
console.log(hero.age);// 16
var hero2 = new Hero('桔梗');
console.log(hero2.name);// 桔梗
console.log(hero2.age);// 16
// 为对象hero新增age属性
// hero.age = 80;
// console.log(hero.age);// 80
//
// console.log(hero);
//
// console.log(hero2.age);// 16
Hero.prototype.age = 80;
console.log(hero.age);
console.log(hero2.age);- 检测自有或原型属性
有两种方式以hasOwnPrototype()来检测对象是否指定自有属性
以in关键字检测对象及原型链是否有属性
function Hero(){
// this.name = '犬夜叉';// 自有属性
}
// Hero.prototype.name = '桔梗';
var hero = new Hero();
/*
Object.hasOwnProperty(prop)方法
判断当前指定属性是否为自有属性
prop - 表示指定属性名称
返回值 - 布尔值
true - 表示存在指定的自有属性
false - 表示不存在指定的自有属性
*/
// console.log(hero.hasOwnProperty('name'));// true
/*
使用in关键字检测对象的属性
作用 - 判断对象中是否存在指定属性(自有属性或原型属性)
返回值 - 布尔值
true - 表示存在指定的属性
false - 表示不存在指定的属性
*/
console.log('name' in hero);- 扩展属性或方法
以原型设置指定构造函数和对象扩展其属性和方法
Object.prototype.sayMe = function () {
console.log('you my sayMe function')
}
var obj = new Object();
obj.sayMe();
Array.prototype.inArray = function (color) {
for(var i = 0, len = this.length; i < len; i++){
if(this[i] === color){
return true;
}
}
return false;
}
var arr = ["red", "green","blue"];
console.log(arr.inArray("yellow"));
console.log(arr.inArray("red"));- 重写原型属性
将构造函数和对象，以自有属性重写远得属性
//定义构造函数
function Hero() {
this.name = '犬夜叉'
}
Hero.prototype.name = '桔梗';
//构造函数原型
var hero = new Hero();
// 构造函数创建对象
console.log(hero.name);//犬夜叉
//自有属性与原型属性同名，默认访问是自有属性，自有属性优先级别高于原型属性
delete hero.name;
//删除对象属性
console.log(hero.name);//桔梗
//重新访问对象属性- isPrototypeOF()方法
//通过初始化方式定义对象
var obj = {
name : '犬夜叉'
}
function Hero() {}
//定义构造函数
Hero.prototype = obj;
//将对象obj赋值给构造函数Hero原型
var hero = new Hero();
//通过构造函数创建对象
var result = obj.isPrototypeOf(hero);
//判断指定对象是否是另一个对象原型
console.log(result);3.扩展内建对象
内置对象的prototype属性设置扩展属性和方法
Object.prototype.sayMe = function () {
console.log('you my sayMe function')
}
var obj = new Object();
obj.sayMe();
Array.prototype.inArray = function (color) {
for(var i = 0, len = this.length; i < len; i++){
if(this[i] === color){
return true;
}
}
return false;
}
var arr = ["red", "green","blue"];
console.log(arr.inArray("yellow"));
console.log(arr.inArray("red"));
