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

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. js原生导出excel和csv

    ​ 严格意义来说并不是真正的excel文件,只是可以用excel打开查看而已,实际上的格式是逗号分隔文件即csv文件. 这里有几个坑要说一下: 不加Unicode的utf8头部标识excel打开文件会 ...

  2. art-template 弹出上传多图

    主内容 <script id="img-show-tpl" type="text/html"> <div> <div class= ...

  3. Ubuntu中Qt Creator无法启动调试

    Ubuntu下安装Qt creator后无法启动调试,报错为Ptrace:Operation not permitted. 产生原因: 在Ubuntu 11.04("Natty Narwha ...

  4. LeetCode 896. 单调数列(Monotonic Array)

    896. 单调数列 896. Monotonic Array 题目描述 如果数组是单调递增或单调递减的,那么它是单调的. 如果对于所有 i<=j,A[i]<=A[j],那么数组 A 是单调 ...

  5. 初始化一个React项目(TypeScript环境)

    React将由三部分组成,其中,Redux是应用状态管理服务,React-Router用于路由映射,React View用于显示界面. 我们使用Facebook推荐的create-react-app来 ...

  6. linux终端提示符修改

    Linux主机名莫名其妙的由@myhostname变成了@bogon了之后 1.在linux下添加一个127.0.0.2名叫bogon的主机此方法使用后,bogon主机名得以解析,使用的主机名仍为bo ...

  7. js复制内容到粘贴板

    点击右边内容:<span onclick="copyContent(this);" title="点击复制">啊,我被复制了</span> ...

  8. consul客户端配置微服务实例名称和ID

    consul客户端必须配置微服务实例名称和ID,微服务启动的时候需要将名称和ID注册到注册中心,后续微服务之间调用也需要用到. 名称可以通过以下两种方式配置,优先级从高到低.两个都不配置则默认服务名称 ...

  9. jacascript Ajax 学习之 JQuery-Ajax

    jQuery 对 ajax 操作进行了封装,在 jQuery 中 $.ajax() 属性最底层的方法,第2层是 load().$.get() 和 $.post() 方法,第3层是 $.getScrip ...

  10. 自定义AuthorizeFilter

    using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCore.Authorization.Infrastructure; u ...