js18编程思想

简介: js18编程思想

js18编程思想


01.编程思想 [重要]

解决问题思维方式
       - 面向对象编程
            找解决问题的对象,调用其功能解决问题。
            如果解决问题的对象不存在, 自己创建对象,封装功能.
       - 面向过程编程
           按步骤进行,第一步做什么,第二步做什么 

02.创建对象的方式:【面试】

具体一个事物
           特征  行为
1.创建对象
           功能行为 -> 方法
           特征 -> 属性
2.创建的方式:
  1.简单函数创建
   function test1() {
            let person = new Object() //创建一空对象
            person.name = 'jack' //对象创建属性name赋值为jack
            person.age = 18 //对象创建属性age赋值为18
        }
    2.字面量创建
     function test2() {
            let person1 = {
                name: 'jack',
                age: 18
            }
            let person2 = {
                name: 'rose',
                age: 20
            }
            let person3 = {
                name: 'tom',
                age: 21
            }...
        }
     3.工厂函数
     function createPerson(name, age) {
            let person = {
                name,
                age
            }
            return person
        }
        let p1 = createPerson('jack', 18)
        let p2 = createPerson('rose', 20)
        let p3 = createPerson('tom', 21)
        //创建手机对象,颜色,类型
        function createPhone(color, type) {
            let phone = {
                color,
                type
            }
            return phone
        }
        let pp1 = createPhone('白色', 'iphone13')
        let pp2 = createPhone('黑色', '华为monto-s122')
  4.构造函数 - 对象的模板
             1. 函数名就是对象类型名
                  首字母大写
             2. 构造函数体中,this关键字只定义属性和方法
             3. 通过new语句 调用构造函数创建对象
             4.注意:事件处理函数中,在外层保存实例对象的this
       function Person(name, age) {
            this.name = name //给当前对象创建name属性,赋值为jack
            this.age = age   //给当前对象创建age属性,赋值为18
            this.say = function () {
                console.log(this.name, '在说话');
            }
        }
        //创建对象
        let o1 = new Person('jack', 18)
        let o2 = new Person('rose', 20)
        o1.say()
        o2.say()
        console.log(o1.name);
        console.log(o2.name);
        //表示手机的构造函数
        function Phone(color, type) {
            this.color = color
            this.type = type
            this.callPhone = function () {
                console.log(this.color + this.type + '的手机打电话');
            }
        }
        let phone1 = new Phone('白色','iphone13-10012')
        phone1.callPhone()
         5.Object.create() 方法创建对象,以参数为原型来创建
         Object.create() 方法创建一个新对象,使用现有的对象来提供新创建的对象的 __proto__。(请打开浏览器控制台以查看运行结果。)


03.检查对象数据类型

对象数据类型 
            instanceof关键字 (可以检查内置数据类型和自己创建数据类型)
            用法: 
               对象 instanceof 数据类型  =>返回值 true|false
基本数据类型 
            typeof
区分数据类型
            自己创建数据类型
               构造函数 
            内置数据类型
                Array 数组
                Object 简单对象
                String  字符串对象
                Date 日期时间
                Math
                RegExp
                JSON
             let arr = new Array()
             let arr = [10,20]
             arr instanceof Array


04.练习

选项卡1.0 -1.1- 1.2


05.概念区分

构造函数、实例、引用变量、对象名,对象概念区分
对象:
  实例对象  
        let p1 = new Person('jack',18) 
        //p1 引用变量  对象名 p1
        //实例对象,实例化一个对象,也就是new语句创建一个对象
  原型对象
  函数对象


06.prototype 原型对象【面试题】

1.面试:什么是原型对象?作用?
    1.实例对象公共的属性和方法,提取出来定义到一个独立的对象,节约内存空间
    2.javascript规定,每个构造函数都有一个prototype属性指向它的原型(原型对象)
    3.在原型对象上定义的属性和方法可以被所有构造函数对应的实例对象访问
2.面试:为什么实例对象能访问到原型对象公共的属性和方法?
  1.因为每个实例对象都有一个隐藏原型指向原型对象
3. //[[Prototype]] <==> __proto__
phone1.__proto__ === Phone.prototype
如果 原型函数和构造函数有同样的方法,实例对象会执行构造函数的方法(图里看出构造函数更近)


07. 内置(原生)对象

 所有函数都有 prototype 属性对象

同样的方法,实例对象会执行构造函数的方法(图里看出构造函数更近)

[外链图片转存中...(img-adyqOxZv-1669771432106)][外链图片转存中...(img-UKiv1o22-1669771432107)]
# 07. 内置(原生)对象 

所有函数都有 prototype 属性对象


         
相关文章
js- 面向对象进阶
Object.defineProperty等面向对象的信息
|
JavaScript
【JS中面向对象编程】
【JS中面向对象编程】
53 0
|
存储 JavaScript
js-面向对象
把数据及对数据的操作方法放在一起,作为一个相互依存的整体——对象。对同类对象抽象出其共性,形成类。类中的大多数数据,只能用本类的方法进行处理。
|
JavaScript
JS进阶(四)面向对象
面向对象 1、对象、类、实例 JS 本身是基于面向对象思想设计出来的一门编程语言,当我们给予JS进行程序设计的时候,也应该按照面向对象的想法去开发或者理解。 对象,一种泛指 类:对象的一部分 实例:某个类中的具体事物
58 0
|
JavaScript
10.js类和对象
10.js类和对象
74 0
|
JavaScript 前端开发 Go
理解js中的面向对象
理解js中的面向对象
理解js中的面向对象
|
JavaScript 前端开发 Java
JS基础-面向对象
JavaScript、Java、c#.... 面向对象:JavaScript有些区别! 类:模板 原型对象 对象:具体的实例 在JavaScript这个需要大家换一下思维方式! 原型:
100 0
|
JavaScript 前端开发
JS查漏补缺——JavaScript的继承实现
JS查漏补缺系列是我在学习JS高级语法时做的笔记,通过实践费曼学习法进一步加深自己对其的理解,也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解JavaScript的继承实现
95 0
|
JavaScript 前端开发 数据库
js 面向对象详解
面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就行了。
97 0
|
JavaScript 前端开发 Java