构造函数(回顾)

原创已于 2023-04-26 19:34:57 修改 · 401 阅读

0 ·

CC 4.0 BY-SA版权

柳晓黑胡椒

文章标签：

#javascript #前端 #开发语言

于 2023-02-27 18:23:38 首次发布

js基础专栏收录该内容

35 篇文章

订阅专栏

文章详细介绍了JavaScript中的构造函数，包括其语法、作用以及与普通函数的区别。在构造函数的执行过程中，阐述了如何创建类的实例，以及this的指向。同时，讨论了return语句在构造函数中的影响，以及new的优先级。此外，文章还提到了检测实例所属类的三种方法：instanceof、hasOwnProperty和in，并展示了封装new操作符的示例代码。

语法(ES3)

new 函数()
约定规范：类目的第一个字母都是大写，大驼峰式命名

作用

创建自定义类和类的实例

构造函数和普通函数的区别

调用方式
普通函数： Fn 是函数本身不执行 Fn() 函数执行
构造函数： new Fn() 构造函数执行， new Fn 构造函数执行(没有传实参)
执行阶段中创建一个对象，且this指向它，return 返回这个对象

构造函数执行

构造函数执行步骤

初始化作用域链
形参赋值(初始化arguments)
变量提升
在当前上下文创建一个对象(当前类的实例)
让当前上下文的 this 指向该对象
代码执行 – 把私有变量的值赋值给新创建的实例对象的私有属性
执行完，默认返回该对象

类的实例

实例的私有属性和构造函数的私有变量没有必然联系，构造函数 this 才是实例
每一个实例都是一个单独的对象，相互独立

return 问题

没有 retuan，默认返回类的实例
retuan 基本数据类型，默认返回类的实例
return 引用数据类型，则会把返回的实例覆盖，返回自己的值

function Person () { return null } // null是个特殊的对象，是基本数据类型
console.log(new Person)// Person {}

new的优先级

new(带参数列表) > 函数调用 > new(无参数列表)
在这里插入图片描述
题目：

function Foo() { return this; }
Foo.getName = function () { console.log(1); };
Foo.prototype.getName = function () { console.log(2); };
new Foo.getName();//1
new Foo().getName();//2
//分析： 由于 优先级 new(带参数列表) > 函数调用)
//   第一步：  先执行 new Foo()    返回 {}
//   第二步：  {}.getName()    2
//   自己的私有属性没有，会沿着__proto__原型链，找所属类的prototype原型上的公共方法
new new Foo().getName;//2
//分析： 由于 优先级 new(带参数列表) > 函数调用)
//   第一步：  先执行 new Foo()    返回 {}
//   第二步： new {}.getName    2
new new Foo().getName();//2

检测实例的3种方法

instanceof

定义：检测当前实例是否属于这个类

hasOwnProperty

定义：检测当前的某一个属性是否为实例(对象)的私有属性 ==》返回布尔值
使用方法：对象.hasOwnProperty(属性名)

function Person(){ this.age = 24 }
Person.prototype.name ='ll';
var obj = new Person;
console.log(obj.hasOwnProperty('name'));//false
console.log(obj.hasOwnProperty('age'));//true

in

定义：检测当前属性是否为对象属性 ==》返回布尔值
使用方法：属性名 in 对象

function Person(){ this.age = 24 }
Person.prototype.name ='ll';
var obj = new Person;
console.log('age' in obj)//true
console.log('name' in obj)//ture

封装 hasPublicProperty

Object.prototype.myHasPublicProperty = function (attr) {
  return (attr in this) && !obj.hasOwnProperty(attr)
}

封装 new

缺点：只能模拟自己的创建的函数，不能模拟js中自带的构造函数

const myNew = (func) => {// new操作符重写
	// 1. 在当前上下文`创建一个对象`
    var obj = {};
    if (func.prototype !== null) {
    	// 2. 让这个对象指向当前类的实例
        obj.__proto__ = func.prototype;
        //  3. 私有变量的值赋值给新创建的实例对象的私有属性
        var res = func.apply(obj, [].slice.call(arguments, 1));
        //  4. 考虑原始值和 null 不回覆盖该对象
        if ((typeof res === "object" || typeof res === "function") && res !== null) {
            return res;
        }
        // 5. 返回该对象
        return obj;
    }
}