JS高级补充

最新推荐文章于 2024-12-29 12:25:56 发布

原创最新推荐文章于 2024-12-29 12:25:56 发布 · 988 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#原型模式 #javascript #前端

本文探讨了JavaScript中的IIFE、原型和原型链概念。每个函数都有一个prototype属性，指向一个Object空对象，用于实例化。通过instanceof可以判断对象是否为某个构造函数的实例。原型链在查找对象属性时起作用，而设置属性则直接在当前对象中添加。原型链继承实现了子类型对父类型属性和方法的共享。

IIFE

匿名函数自调用

function (){
    console.log(1);
}
//这样写会报错。因为又不给它函数名，又不调用
//解决方法:匿名函数自调用
(function (){
    console.log(1);
})()//输出1

prototype

每一个函数都有一个prototype属性，它默认指向一个Object空对象（即称为：原型对象）

instanceof 判断左边的对象是不是右边的实例

//往一个函数里面添加另一个函数
function fn(){
    
}
fn.prototype.test = function(){
    console.log(123);
}

原型对象中有一个属性constructor，它指向函数对象

function fn(){
    
}
console.log(fn.prototype.constructor === fn);//返回true

原型

//每一个函数都有一个prototype属性，即显式原型(属性)
//每一个实例对象都有一个__proto__属性，即隐式原型(属性)

对象的隐式原型的值为其对应构造函数的显性原型的值

constructor 属性返回对象、数组的构造函数。其返回值是对函数的引用，而不是函数的名称

对于 JavaScript 数组，constructor 属性返回： function Array() { [native code] }

对于 JavaScript 对象，constructor 属性返回： function Object() { [native code] }

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.constructor;
// 返回 function Array() { [native code] }

原型链

//所有函数都是Function的实例(包含Function)
console.log(Function.__proto__ === Function.prototype)//true
//Object的原型对象是原型链的尽头
console.log(Object.prototype.__proto__)//null

读取对象属性时，会自动到原型链中查找
设置对象属性时，不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

function Fn(){
    
}
Fn.prototype.a = 'xxx';
var fn1 = new Fn();
console.log(fn.a);//xxx
var fn2 = new Fn();
fn2.a = 'yyy';
console.log(fn1.a,fn2.a)//xxx yyy

原型链继承

子类型的原型为父类型的一个实例对象

//父类型
function fn1(){
    this.name = 'fn1 name'
}
fn1.prototype.fn3 = function(){
    console.log(this.name)
}
//子类型
function fn2(){
    this.name = 'fn2 name'
}
fn2.prototype = new fn1()
fn2.prototype.fn4 = function(){
    console.log(this.name)
}
var fn2 = new fn2();
fn2.fn3();//输出fn1 name
fn2.fn4();//输出fn2 name