昨天面试出了一道面试题 本人我做错了 于是痛定思痛 再过一遍面向对象

  1. var name="一体机";
  2. var value="infolist";
  3.  
  4. //构造函数
  5. function Anbay(){
  6. this.name="安备";
  7. this.value="anbay";
  8. }
  9.  
  10. //原型
  11. Anbay.prototype.show=function(message){
  12. alert(this.name);
  13. alert(message);
  14. }
  15.  
  16. //对象
  17. var dbbackup={
  18. name:"迪备",
  19. value:"dbbackup"
  20. }
  21.  
  22. //实例
  23. var anbay=new Anbay()
  24. anbay.show(this.value)//"安备" ,"infolist"
  25.  
  26. 这里的this.value相当于window.value,构造函数被调用构造函数里面的this指向实例
  27.  
  28. anbay.show(dbbackup.value)//"安备","dbbackup"
  29.  
  30. 这里的valuedbbackup里面的自然不用说,构造函数的作用域没有改变this.name弹出构造函数里面的dbbackup
  31.  
  32. anbay.show.call(dbbackup,this.value)//"迪备","infolist"
  33.  
  34. 这里的构造函数在对象dbbackup中执行,对象dbbackup拥有了所有的属性和方法

  

以下为个人测试得到的一些结果和数据

对理解面向对象很有用

1、属性类型 分为数据属性、访问属性

a.定义一个数据属性

  1. /*var person={
  2. } //属性所在的对象,属性的名字,和一个描述符对象
  3. Object.defineProperty(person,"name",{
  4. writable:false,
  5. value:"Ewarm"
  6. })
  7. alert(person.name)
  8. delete person.name
  9. alert(person.name)
  10.  
  11. var person={
  12. } //属性所在的对象,属性的名字,和一个描述符对象
  13. Object.defineProperty(person,"name",{
  14. enumerable:true,
  15. value:"Ewarm"
  16. })

 

  1. var person={}
  2. Object.defineProperty(person,"name",{
  3. configurable:false,
  4. value:"Ewarm"
  5. })
  6. delete person.name
  7. alert(person.name)//弹出Ewarm
  8. Object.defineProperty(person,"name",{
  9. configurable:true,
  10. value:"Ewarm"
  11. })//抛出错误 不能被定义
  12. Object.defineProperty(person,"name",{
  13. writable:true,
  14. value:"cch"
  15. })
  16. person.name="cch"
  17. alert(person.name)

b.定义一个访问属性
//访问器属性常用设置方式,即设置一个属性值会导致其他属性发生变化

  1. var book={
  2. _year:'2017',
  3. edition:1
  4. };
  5. Object.defineProperty(book,"year",{
  6. get:function(){//get 读取
  7. return this._year;
  8. },
  9. set:function(newValue){ //set 写入
  10. if(newValue>2017){
  11. this._year=newValue;
  12. this.edition+=newValue-2017
  13. }
  14. }
  15. })
  16. book.year=2018;
  17. alert(book.edition)
  18. alert(book._year)

//c.定义访问器的旧方法

  1. var book={
  2. _year:'2017',
  3. edition:1
  4. }
  5.  
  6. book.__defineGetter__("year",function(){
  7. return this._year
  8. })
  9. book.__defineSetter__("year",function(newValue){
  10. if(newValue>2017){
  11. this._year=newValue;
  12. this.edition+=newValue-2017
  13. }
  14. })
  15. book.year=2018
  16. alert(book.edition)//

//d.定义多个属性

  1. var book={}
  2. Object.defineProperties(book,{
  3. _year:{
  4. writable:true,
  5. value:2017
  6. },
  7. edition:{
  8. writable:true,
  9. value:1
  10. },
  11. year:{
  12. get:function(){
  13. return this._year;
  14. },
  15. set:function(newValue){
  16. if(newValue>2017){
  17. this._year=newValue;
  18. this.edition+=newValue-2017
  19. }
  20. }
  21. }
  22. })
  23. var descriptor=Object.getOwnPropertyDescriptor(book,"_year");//数据属性
  24. alert(descriptor.value)
  25. alert(descriptor.configurable)//用Object.defineProperties 这种configure默认为 false
  26. alert(descriptor.enumerable)
  27. alert(typeof descriptor.get);
  28. var descriptor=Object.getOwnPropertyDescriptor(book,"year");
  29. alert(descriptor.value);
  30. alert(descriptor.enumerable);
  31. alert(typeof descriptor.get);

2.创建对象

//a.工厂模式

  1. function createPerson(name,age,job){
  2. var o=new Object();
  3. o.name=name;
  4. o.age=age;
  5. o.job=job;
  6. o.sayName=function(){
  7. alert(this.name)
  8. }
  9. return
  10. }
  11. var person1=createPerson("Ewarm",18,"software Engineer")
  12. var person2=createPerson("CCH",18,"doctor")

//b.构造函数

  1. function Person(name,age,job){
  2. this.name=name;
  3. this.age=age;
  4. this.sayName=function(){
  5. alert(this.name)
  6. }
  7. }
  8.  
  9. var person1=new Person()
  10. var person2=new Person()
  11. var person=new Person("Ewarm",18,"software Engineer")

//1.当构造函数调用

  1. person.sayName()
  2. Person("Greg",27,"Doctor");

//2.当普通函数调用

  1. window.sayName()

//3.在另一个对象的作用域中调用

  1. var o =new Object()
  2. var o={
  3. character:"smart",
  4. name:"Ew",
  5. age:25,
  6. job:"Nurse"
  7. }
  8. console.log(o)
  9. Person.call(o,"cch",18,"nurse")//就是说这个构造函数 在o里面执行并且o里面的该有还是有 调用之后 之前的会被覆盖 没有的会被加上在o里面
  10. o.sayName()
  11. console.log(o)

//4.原型模式

  1. function Person(){
  2. }
  3. Person.prototype.name="Ewarm";
  4. Person.prototype.age="29";
  5. Person.prototype.job="software Engineer";
  6. Person.prototype.sayName=function(){
  7. alert(this.name);
  8. }
  9. var person1=new Person()
  10. //我们可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系,即实例.__proto__是否指向构造函数的原型对象,如果指向那么这个方法返回为ture。
  11. alert(Person.prototype.isPrototypeOf(person1))//true
  12. //ECMAScript5增加了一个新方法 Object.getPrototype() 这个方法返回的是实例.__proto__的值,即构造函数原型对象
  13.  
  14. alert(Object.getPrototype(person1)==Person.prototype)//emmmm 我用的谷歌 报错了 说是支持可以实现了但没实现

注意:当我们要读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例开始 问:你有没有我要的东西。如果有返回该属性的值。

如果没有继续往下面查找继续搜索指针指向的原型对象,在原型对那个中查找具有指定名字的属性,如果有返回该属性,如此一直到顶层Object。prototype,还没有返回undefine

原型有好多小细节 使用原型继承存在问题 但有解决的方法 这里我们先只说创建对象这一块

//5.组合使用构造函数和原型模式

//6.动态原型模式

//7.寄生构造函数模式

//8.稳妥构造函数模式

js面向对象知识点之对象属性 创建对象 总结中的更多相关文章

  1. 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  2. JS面向对象编程,对象,属性,方法。

    document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v ...

  3. JS面向对象系列教程 — 对象的基本操作

    面向对象概述  面向对象(Object Oriented)简称OO,它是一种编程思维,用于指导我们如何应对各种复杂的开发场景. 这里说的对象(Object),意思就是事物,在面向对象的思维中,它将一 ...

  4. JS面向对象编程:对象

    一般面向过程的写法都是写很多function,坏处:1.代码复用不好 2.函数名称容易重复冲突 下面介绍面向对象的写法: 在JS中每个函数function都是一个对象. 比如,下面这个就是一个对象,我 ...

  5. JS的从理解对象到创建对象

    JavaScript不是一门真正的面向对象语言,因为它连最基本的类的概念都没有,因此它的对象和基于类的语言中的对象也会有所不同.ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值.对 ...

  6. js之oop <二> 对象属性

    js中对象属性可以动态添加和删除.删除对象属性用delete关键字. function obj(){ } var oo = new obj(); oo.a = "a"; oo.b ...

  7. JavaScript之面向对象的概念,对象属性和对象属性的特性简介

    一.大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象.但ECMAScript(指定JavaScript标准的机构,也就是说JavaScri ...

  8. 原来JS是这样的 - 对象属性

    引子 在上一篇(原来JS是这样的 (2))刚发布的时候就阅读了那篇文章的人可能会注意到那篇曾用过"JavaScript 中万物皆对象"的说法,而在随后我发现错误后立即更新改掉了这个 ...

  9. JS delete 用法(删除对象属性及变量)

    1,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete ...

随机推荐

  1. Servlet知识点大纲

    这是我整理的Servlet知识点大纲,可按照它的顺序来学习-..具体的内容在我的博客中都可以找到!

  2. 时间效率:最小的K个数

    输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. import java.util.ArrayList; import jav ...

  3. 简单CSS 布局

    CSS Layout CSS Layout 是对上下左右布局的一个简单封装,主要针对自己项目里面方便使用. 坚持组合大于继承的原则,复杂的布局也是由简单布局组成的. 所以不习惯margin/paddi ...

  4. 关于使用git和github的一点点感想

    第二篇博客 首先附上我的第一个java程序github地址: https://github.com/KingsC123456/FirstJavaHello 其次是关于我的github介绍,因为一直使用 ...

  5. spring依赖注入中接口的问题

    问题描述:一个接口,有俩个实现类当注入时候名字不同时,会出现不同的情况 action层: @Controller("userAction") @Scope("protot ...

  6. 深入理解计算机系统chapter3

    栈在处理过程调用中起到至关重要的作用,栈向下增长,栈顶元素的地址是所有栈中元素最小的.栈指针%esp保存着栈顶元素的地址 控制: 重点: 基于条件数据传送的代码比基于条件控制转移(预测错误惩罚比较高) ...

  7. JS -- Variables As Properties

    Variables As Properties When you declare a global JavaScript variable, what you are actually doing i ...

  8. Spring Boot Document Part II(下)

    Part II. Getting started 11. 开发第一个Spirng Boot Application使用Spring Boot的关键特征开发一个基于JAVA Web的“Hello Wor ...

  9. 分享基于分布式Http长连接框架--架构模型

    我画了个简单的架构图来帮助说明: 其实为发布订阅架构模式. 生产者和消费者我们统一可理解为客户端,消息中间件可认为是服务端. 生产者和消费者做为客户端要跟服务端交互,则先通过代理订阅服务端,订阅成功后 ...

  10. 再起航,我的学习笔记之JavaScript设计模式28(委托模式)

    ## 委托模式 ### 概念介绍 **委托模式(Entrust): **多个对象接收并处理同一请求,他们将请求委托给另一个对象统一处理请求. ### 利用委托优化循环 如果我们有一个需求需要让用户点击 ...