一、字面量模式声明一个对象

let m = {name: "lisi", age:15}

m.constructor
// ƒ Object() { [native code] } Object.constructor
// ƒ Function() { [native code] }

①每个对象都有构造函数。

②字面量形式的实例的构造函数通常是 Object。

③Object、Function与普通函数 的构造函数都是 Function。

二、构造函数模式

function Circle(radius) {
this.radius = radius
this.draw = function (){
console.log("draw")
}
} // new 操作符做了4件事
let c1 = new Circle(2) let Circle2 = new Function("radius", `
this.radius = radius
this.draw = function (){
console.log("draw")
}
`)

说明:

When the code new Foo(...) is executed, the following things happen:

  1. A new object is created, inheriting from Foo.prototype.
  2. The constructor function Foo is called with the specified arguments, and with this bound to the newly created object. new Foo is equivalent to new Foo(), i.e. if no argument list is specified, Foo is called without arguments.
  3. The object (not null, false, 3.1415 or other primitive types) returned by the constructor function becomes the result of the whole new expression. If the constructor function doesn't explicitly return an object, the object created in step 1 is used instead. (Normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.)

总结:

构造函数的目的是创建新实例。如果构造函数的返回值是一个对象,那么这个新实例就是该返回值。

如果构造函数的返回值不是一个对象,那么 new 操作符会创建一个 Object,绑定构造函数的this到这个 Object,最后返回 this。如果不使用 new 操作符,则不会创建这个 Object。

开闭原则

function Circle(radius) {
this.radius = radius // 定义闭包共享变量
let defaultLocation = {
x: 0,
y: 0
} this.draw = function () {
console.log("draw")
}
//提供可读权限(但不可写)
Object.defineProperty(this, 'defaultLocation', {
get: function () {
this.defaultLocation
}
})
}

参考


https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

https://blog.csdn.net/luanpeng825485697/article/details/78009093

js 面向对象之构造器与工厂函数的更多相关文章

  1. js面向对象、创建对象的工厂模式、构造函数模式、原型链模式

    JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...

  2. js面向对象(对象/类/工厂模式/构造函数/公有和原型)

    https://www.cnblogs.com/sandraryan/ 什么是对象 js中一切都是对象(有行为和特征).js允许自定义对象,也提供了内建对象(string date math等) 对象 ...

  3. js 面向对象中,定义一个函数的过程

    定义一个函数做的两件事:1: 实例化一个Function对象:2: 实例化一个Object对象,并给该函数扩展prototype属性指向这个构造函数 大致过程如图所示: 每一种引用类型(函数,对象,数 ...

  4. JavaScript中的构造函数和工厂函数说明

    在cnblog上看到一篇文章,讲解JS中的构造函数和工厂函数,觉得讲的真好 JavaScript中的工厂函数和构造函数都能用来创建一个对象,我们可以来看看下面的例子 构造函数 function cre ...

  5. js面向对象自定义MyString()的构造器函数,实现内建String()属性和方法:

    js面向对象自定义MyString()的构造器函数,实现内建String()属性和方法: var s = new MyString('hello'); s.length; s[0]; // " ...

  6. JS面向对象之工厂模式

    js面向对象 什么是对象 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个名字都映射到一个值. 简单来 ...

  7. JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法)

    JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法) 一丶正则的用法 创建正则对象: 方式一: var reg=new ...

  8. JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)

    函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) {             return i1 + i2;//如果不写return返回 ...

  9. js原生设计模式——3简单工厂模式\js面向对象编程实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. commands模块【转】

    https://www.cnblogs.com/wjoyxt/p/5087951.html 要获得shell命令的输出只需要`cmd`命令就可以了, 需要得到命令执行的状态则需要判断$?的值, 在Py ...

  2. Java程序内存分析

    1. Runtime.getRuntime().freeMemory() 和 jvisualvm.exe http://blog.csdn.net/u011004037/article/details ...

  3. 关于typescript之定义变量和数据类型那点事

    变量和数据类型 JavaScript虽说深受万千程序员喜爱,却有着对于企业大规模开发很难管理的缺陷.这时候,TypeScript的优势便体现出来.接下来,我们会先接触在TypeScript中定义变量相 ...

  4. _string 灵活查询

    $process = (int)$_POST['process']; switch ($process) { case 0: // 全部 $where['_string'] = ' (`sale_wa ...

  5. SPA项目首页导航+左侧菜单

    Mock.js是个啥 前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器,用来帮助前端调试开发.进行前后端的 ...

  6. 关于memset的赋值(最大值最小值的选择)

    memset赋值赋的是ASSCII码转为二进制赋值 比如 memset(,0xff,sizeof()),0xff转为二进制11111111,int为4字节所以最后为111111111111111111 ...

  7. zabbix 数据库分表操作

    近期zabbix数据库占用的io高,在页面查看图形很慢,而且数据表已经很大,将采用把数据库的数据目录移到新的磁盘,将几个大表进行分表操作 一.数据迁移: 1.数据同步到新的磁盘上,先停止mysql(不 ...

  8. 1.MVC基础-初识MVC,与WebForm比较

    1.Net WebForm的开发模式

  9. day01-02

  10. AetherUpload大文件传输

    AetherUpload-Laravel是laravel框架下的一个大文件传输组件 github:https://github.com/peinhu/AetherUpload-Laravel 文件传输 ...